第8章定位网页元素

最新推荐文章于 2022-06-28 14:43:11 发布

X_302lizhaohon

最新推荐文章于 2022-06-28 14:43:11 发布

阅读量657

点赞数

本文链接：https://blog.csdn.net/X_302lizhaohon/article/details/80837050

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>美食今日推荐页面</title>
    <link rel="stylesheet" href="../css/美食今日推荐.css"></div>
</head>
<body>
<div id="bord" class="bord">
    <h3><span>SHOP</span>今日推荐</h3>
    <img src="../image/img9.gif"/>
        <ul>
            <li><a href="#">汉来国际美食百货</a></li>
            <li>口味：创意中餐</li>
            <li>区域：朝阳/CBD</li>
        </ul>
    <img src="../image/img7.gif"/>
    <ul>
        <li><a href="#">汉来国际美食百货</a></li>
        <li>口味：创意中餐</li>
        <li>区域：朝阳/CBD</li>
    </ul>
    <img src="../image/img8.gif"/>
    <ul>
        <li><a href="#">汉来国际美食百货</a></li>
        <li>口味：创意中餐</li>
        <li>区域：朝阳/CBD</li>
    </ul>
    <img src="../image/img7.gif"/>
    <ul>
        <li><a href="#">汉来国际美食百货</a></li>
        <li>口味：创意中餐</li>
        <li>区域：朝阳/CBD</li>
    </ul>
</div>
<img src="../image/more.gif"id="tu1"/>
<img src="../image/shen.png"id="tu2"/>
</body>
</html>

#bord{
    width: 320px;
    border: 1px #999999 solid;
    border-radius: 10px;
    margin: 0 auto;
}
h3{
    padding-left: 35px;
}
span{
    color: red;
    padding-right: 10px;
}
#tu1{
    position: relative;
    top: -380px;
    left: 600px;
}
#tu2{
    position: relative;
    top: -334px;
    left: 370px;
}
.bord ul{
    list-style: none;
    display: block;
}
.bord ul li a{
    color: #CC0000;
    font-weight: bolder;
    font-size: 16px;
}
.bord ul li{
    padding-left: 120px;
    font-size: 15px;
    color: #999999;
}
.bord img{
    float: left;
    padding-left: 20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东轮播图</title>
    <style>
        #tu1{
            width: 800px;
            margin: 0px auto;
            position: relative;
        }
        ol li{
            list-style: none;
            font-size: 14px;
            width: 16px;
            height: 16px;
            text-align: center;
            display: inline-block;
            background-color:#4D4D4D;
            color: #ECECEC;
            border: 1px #ECECEC solid;
            border-radius: 50%;
            position: relative;
            bottom: 50px;
            left: 550px;
        }
        li:nth-of-type(1){
            background-color: orange;
        }
    </style>
</head>
<body>
<div id="tu1">
    <img src="../image/focus.jpg"/>
</div>

<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ol>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新东方顶部导航菜单</title>
    <link rel="stylesheet" href="../css/新东方顶部导航菜单.css">
</head>
<body>
<div id="bord">
    <ul>
        <li>购物车</li>
        <li>|</li>
        <li>优惠券</li>
        <li>|</li>
        <li>快速注卡</li>
        <li>|</li>
        <li>各地购课</li>
        <li>|</li>
        <li>手机报</li>
        <li>|</li>
        <li>网站导航</li>
    </ul>
</div>
<img src="../image/logo.gif" id="logo"/>
<img src="../image/open_icon.gif" id="open"/>
<div  class="wen">
<div>托福 雅思 考研 职称英语 初中 日语 </div>
<div>网络课堂 资讯中心 知识堂 大师讲坛 学习论坛 学词 考研搜校</div>
<span>M-Zone 手机报 时时英语</span>
</div>
</body>
</html>

#bord{
    width: 800px;
    background-color: gainsboro;
    border-bottom: 1px #999999 double;
}
ul li{
    font-size: 15px;
    list-style: none;
    color: #999999;
    display: inline-block;
    position: relative;
    left: 160px;
    top: 9px;
    padding-right: 13px;
}
#logo{
    position: relative;
    top: -30px;
    left: 10px;
}
#open{
    position: relative;
   left: 652px;
    top: -46px;
}
.wen{
    width: 220px;
    border: 1px #999999 solid;
    position: relative;
    left: 490px;
    bottom: 40px;
    background-color: #FFFFFF;
}.wen div {
     border-bottom:1px #999999 solid;
     padding: 15px;
    color:#999999 ;
 }
 .wen span{
     padding: 15px;
     color:#999999 ;
 }