有效沟通问答-【官方】百战程序员_IT在线教育培训机构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/京东.css">
        <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">

    </head>
    <body>
        
        <!--导航开始-->
        <div class="nav">
            <div class="wrap">
                <!--导航标签一般用ul和li来做-->
                <ul class="nav_ul1">
                    <!--由demo_index.html这个文件运行，复制粘贴iconfont编码-->
                    <li><a href=""><i class="iconfont">&#xe663;</i>京东首页</a></li>
                    <li><a href="">配送到福建</a></li>
                </ul>    
                <!--快捷键--ul>li*9>a-->
                <ul class="nav_ul2">
                    <li><a href="">洋洋宝贝</a><span>|</span></li>
                    <li><a href="">我的订单</a><span>|</span></li>
                    <li><a href="">我的京东</a><span>|</span></li>
                    <li><a href="">京东会员</a><span>|</span></li>
                    <li><a href="">企业采购</a><span>|</span></li>
                    <li><a href="">京东手机</a><span>|</span></li>
                    <li><a href="">关注京东</a><span>|</span></li>
                    <li><a href="">客户服务</a><span>|</span></li>
                    <li><a href="">网站导航</a></li>
                </ul>
            </div>                        
        </div>        
        <!--导航结束-->
        
        <!--搜索框开始-->
        <div class="search">
            <div class="wrap">
                <img src="img/京东logo.png" />
                <div class="search_div">
                    <input type="text" class="search_frame"/>
                    <!--搜索按钮-->
                    <input type="button" value="搜索" class="search_button"/>
                </div>
            </div>
        </div>
        <!--搜索框结束-->
        
        <!--标题开始-->
        <div class="title wrap">
            <h3>全部商品</h3>
            <div>
                <span>配送至</span>
                <select>
                    <option>宁德市</option>
                    <option>厦门市</option>
                    <option>福州市</option>
                </select>
            </div>
        </div>
        <!--标题结束-->
        
        <!--显示菜单的开始-->
        <div class="tips wrap">
            <ul>
                <li>
                    <input type="checkbox" />全选
                </li>
                <li>商品</li>
                <li>单价</li>
                <li>数量</li>
                <li>小计</li>
                <li>操作</li>
            </ul>
        </div>
        <!--显示菜单的结束-->
        
        <!--商品详情展示开始-->
        <div class="info wrap">
            <ul>
                <li class="info_1"><input type="checkbox"/></li>
                <li class="info_2"><img src="img/文城.png" width="80px"/></li>
                <li class="info_3"><a>余华：文城（余华新书时隔8年重磅归来，《活着》之后又一精彩力作！）</a></li>
                <li class="info_4"><a>余华：文城</a></li>
                <li class="info_5">￥59.00</li>
                <li class="info_6">
                    <button>-</button>
                    <input type="text" name="id" value="1" />
                    <button class="bot">+</button>
                </li>
                <li class="info_7">￥59.00</li>
                <li class="info_8">
                    <a>删除</a>
                    <a>移入关注</a>
                </li>
            </ul>
        </div>
        <!--商品详情展示结束-->

    </body>
</html>

css代码：

/*导航样式设计开始*/
.nav{
    height: 30px;
    background-color: #F1F1F1;
}
.wrap{
    width: 1000px;
    /*上下外边距为0px，左右外边距自动*/
    margin: 0px auto;
}
.nav_ul1,.nav_ul2 li{
    /*作用：整体竖直左浮动*/
    float: left;
}
.nav_ul1 li{
    /*作用：拆分水平左浮动*/
    float: left;
    /*行高居中，调成该div的宽度数值*/
    line-height: 30px;
    /*京东首页和配送到福建的距离*/
    margin-right: 20px;
}
.nav_ul1 a,.nav_ul2 a,.nav_ul2 span{
    font-size: 12px;
    color: grey;
}
.nav_ul2{
    float: right;
}
.nav_ul2 li,.nav_ul2 span{
    line-height: 30px;
    margin-left: 10px;
}
/*伪元素选择器hover，光标移动至上方即可变色*/
.nav a:hover{
    color: red;
}
/*导航样式设计结束*/

/*搜索框样式设计开始*/
.search{
    /*使京东logo往下移动*/
    margin-top: 20px;
}
.search img{
    /*清除之前的所有样式*/
    clear: both;
    float: left;    
}
.search_div{
    margin-top: 25px;
    /*右浮动*/
    float: right;
}
.search_frame{
    width: 265px;
    height: 21px;
    border: 3px solid #C91623;
    /*相对定位*/
    position: relative;
    left: 9px;
    top: 0px;
}
.search_button{
    width: 51px;
    height: 28px;
    background-color: #C91623;
    border: 0px;
    color: #FFFFFF;
}
/*搜索框样式设计结束*/

/*标题样式设计开始*/
.title{
    margin-top: 130px;
}
.title h3{
    float: left;
    font-size: 27px;
    color: #C91623;
}
.title div{
    float: right;
    font-size: 14px;
    color: grey;
}
/*标题样式设计结束*/

/*显示菜单样式设计开始*/
.tips{
    width: 1000px;
    height: 50px;
    background-color: #F1F1F1;
    margin-top: 170px;
    border: 1px solid #E9E9E9;
}
.tips li{
    float: left;
    line-height: 50px;
    font-size: 12px;
    color: grey;
}
/*border-top上边框*/
.tips li:nth-child(1){width: 90px;border-top: 3px solid #C91623;}
.tips li:nth-child(2){margin-left: 60px;}
.tips li:nth-child(3){margin-left: 470px;}
.tips li:nth-child(4){margin-left: 75px;}
.tips li:nth-child(5){margin-left: 100px;}
.tips li:nth-child(6){margin-left: 50px;}
/*显示菜单样式设计结束*/

/*商品详情样式设计开始*/
.info{
    margin-top: 30px;
    width: 1000px;
    height: 125px;
    background-color: #FFFFFF;
    border: 1px solid gray;
    border-top: 3px solid gray;
}
.info li{
    float: left;
    margin-top: 20px;
}
.info a{
    font-size: 12px;
    color: #333333;
}
.info_1{
    margin-left: 23px;
}
.info_2{
    margin-left: 10px;
    border: 1px solid grey;
}
.info_3{
    text-align: left;
    width: 200px;
    height: 30px;
    margin-left: 15px;
}
.info_4{
    margin-left: 40px;
}
.info_5{
    margin-left: 180px;
}
.info_6{
    margin-left: 35px;
}
.info_6 input{
    width: 30px;
    height: 12px;
    text-align: center;
    position: relative;
    /*往上移动3px*/
    top: -2px;
    /*往左移动3px*/
    left: -2.5px;
}
.info_6 button{
    width: 25px;
    height: 18px;
}
.bot{
    position: relative;
    /*往左移动3px*/
    left: -5px;
}
.info_7{
    margin-left: 40px;
}
.info_8{
    width: 45px;
    text-align: left;
    margin-left: 20px;
}
/*商品详情样式设计结束*/

需要解决的地方是info_8

Python 全系列/第七阶段：网页编程基础/CSS 样式 18383楼

老师，我执行 desc countries; 的时候，如果用SQL Window执行，会报错