HTML 第一学期-第八章上机练习+课后练习(简答题)

最新推荐文章于 2021-10-25 18:08:12 发布

cv.苏北

最新推荐文章于 2021-10-25 18:08:12 发布

阅读量3.2k

点赞数 3

分类专栏： HTML基础

本文链接：https://blog.csdn.net/sxbei/article/details/103723020

版权

HTML基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

上机练习4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
        <!-- 大盒子 -->
        <div class="box">
            <div class="header">
                <img src="../qsn/logo.jpg" alt="">
                    <img src="../qsn/icon_count.png" alt="">
                        <ul class="header2">
                            <li>尾品汇</li>
                            <li>当当优品</li>
                            <li>数字馆</li>
                            <li>都看阅器</li>
                        </ul>
            </div>
                <div class="middle">
                    <a href="#">首页 </a>
                    <a href="#">图书 </a>
                    <a href="#">音像 </a>
                    <a href="#">童装 </a>
                    <a href="#">服装 </a>
                    <a href="#">鞋靴 </a>
                    <a href="#">运动 </a>
                    <a href="#">箱包 </a>
                    <a href="#">美妆 </a>
                    <a href="#">珠宝 </a>
                    <a href="#">家居 </a>
                    <a href="#">食品 </a>
                    <a href="#">酒 </a>
                    <a href="#">手机 </a>
                    <a href="#">数码 </a>
                    <a href="#">电脑 </a>
                    <a href="#">家电</a>
                </div>
                    <img src="../qsn/banner.png" alt="">


                        <div class="bottom">
                            <img src="../qsn/bg_bang.gif" alt="">
                            <img src="../qsn/book-01.jpg" alt="">
                            <img src="../qsn/bookNo1.gif" alt="">
                            <img src="../qsn/book-02.jpg" alt="">
                            <img src="../qsn/bookNo2.gif" alt="">
                            <img src="../qsn/book-03.jpg" alt="">
                            <img src="../qsn/bookNo3.gif" alt="">
                            <ul class="choice1">
                                <li>偷影子的人 </li><br>
                                <li>作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译</li><br>
                                <li>出版社：湖南文艺出版社</li><br>
                                <li>当当价：<span class="price">￥ 17.90</span></li><br>
                                <li>不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，
                                    今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。
                                     一个老是受班上同学欺负的瘦弱小男孩，
                                    因为拥有一种特殊能力而强大：他能“偷别人的影子”，因而能看见他                                
                                </li>
                            
                            </ul>
                                <ul class="choice2">
                                    <li>看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘 </li><br>
                                    <li>作 者：柴静 著</li><br>
                                    <li>出版社：广西师范大学出版社</li><br>
                                    <li><span class="price">￥ 29.40</span>&nbsp;&nbsp;&nbsp;<span class="count">7.4折</span> </li>
                                </ul>
                                    <ul class="choice3">
                                        <li>改变孩子先改变自己 </li><br>
                                        <li>作 者：贾容韬 贾毅 著</li><br>
                                        <li>出版社：作家出版社</li><br>
                                        <li><span class="price">￥ 22.20</span>&nbsp;&nbsp;&nbsp;<span class="count">7.4折</span></li>
                                    </ul>
                        </div>
                            
                               <div class="bottom4">
                                <div  class="bottom2">Copyright (C) 当当网 2004-2017, All Rights Reserved</div>
                                <img src="../qsn/validate.gif" alt="">
                                    <div  class="bottom3">京ICP证041189号出版物经营许可证 新出发京批字第直0673号</div>
                               </div>
                            



        </div>
</body>
</html>

css样式

* {
    margin: 0px;
    padding: 0px;
}

/* 设置盒子宽度 */
.box{
    width: 960px;
    margin: 20px auto;
}

/* 清除浮动 */
.header{
    overflow: hidden;
    margin-bottom: 10px;
}

li {
    display: inline-block;
    list-style: none;
}

/* ul盒子加框线和背景颜色 */
.header2{
    border: 1px #ccc solid;
    padding: 5px;
    background: #EAFFFA;
}
/* 设置ul里面的li文字 */
.header2>li{
    list-style:none;
    color: #666;
    font-size: 15px;
}

/* 转行内块元素 */
.header2>li{
    display: inline-block;
}

/* logo和文字浮动 */
.header img:nth-of-type(1){
    float: left;
}

/* 3折定位 */
.header img:nth-of-type(2){
    float: right;
    position: absolute;
    top: 24px;
    right: 375px;
    z-index: 2;
}

.header2{
    position: relative;
    float: right;
    margin-top: 16px;
}
/* 以上是头部内容 */

.middle{
    background: #FE6915;
    margin-bottom: 10px;
}


/* a标签的样式 */
.middle>a{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-size: 13px;
    background: #FE6915;
    border-top: 1px #FE470B solid;
    border-bottom: 1px #FE470B solid;
    padding:7px 15px 7px 12px;
    
}

a:hover{
    color: red;
    text-decoration: underline;
}
/* 以上是中间内容 */

.bottom{
    border: 1px #CCE9AC solid;
    position: relative;
    height: 370px;
    margin-top: 10px;
}

/* 定位3张图片*/
.bottom img:nth-of-type(1){
    position: absolute;
    top: 20px;
    left: -13px;
}
.bottom img:nth-of-type(2){
    position: absolute;
    top: 90px;
    left: 0px;
}
.bottom img:nth-of-type(3){
    position: absolute;
    top: 80px;
    left: 20px;
    
}

.count{
    color: #5EA593;
    font-size: 12px;
}


.price {
    color: #890020;
    font-size: 12px;
    font-weight: 700;
}

.bottom img:nth-of-type(1){
    color: #1A66B3;
    font-size:16px;
}

.bottom img:nth-of-type(2){
    color: #1A66B3;
    font-size:15px;
}

.bottom img:nth-of-type(3){
    color: #1A66B3;
    font-size:15px;
}

.bottom ul:nth-of-type(1){
    width: 320px;
    position: absolute;
    top: 120px;
    left: 255px;
    font-size: 14px;
    line-height: 22px;
}

.bottom ul:nth-of-type(2){
    /* color: #1A66B3; */
    width: 250px;
    position: absolute;
    top: 100px;
    right: 15px;
    font-size: 14px;
    line-height: 22px;
    
}

.bottom ul:nth-of-type(3){
    width: 250px;
    position: absolute;
    top: 245px;
    right: 15px;
    font-size: 14px;
    line-height: 22px;
    
}

.bottom img:nth-of-type(4){
    position: absolute;
    top: 90px;
    right: 260px;
}

.bottom img:nth-of-type(5){
    position: absolute;
    top: 80px;
    right: 333px;
}

.bottom img:nth-of-type(6){
    position: absolute;
    top: 220px;
    right: 260px;
}

.bottom img:nth-of-type(7){
    position: absolute;
    top: 215px;
    right: 340px;
}

.bottom4{
    text-align: center;
}

.bottom2 ,.bottom3{
    vertical-align: middle;
    display: inline-block;
    margin-bottom:45px ;
}

cv.苏北

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
HTML 第一学期-第八章上机练习+课后练习(简答题)

上机练习4<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
复制链接

扫一扫

专栏目录