作业一学期三书七章

最新推荐文章于 2023-07-20 17:15:10 发布

一江风雪

最新推荐文章于 2023-07-20 17:15:10 发布

阅读量702

点赞数

本文链接：https://blog.csdn.net/sc13647346287/article/details/83578079

版权

1.清除浮动的方法有哪几种？分别如何实现？
（1）浮动元素后面加空div
（2）设置父元素的高度
（3）父级添加overflow属性
（4）父级添加伪类
2.使用display：inlink-block或float布局页面有什么区别？需要注意什么？
（1）display:inline-block
可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
位置方向不可控制，会解析空格，IE 6、IE 7上不支持
（2）float
可以让元素排在一行并且支持宽度和高度，可以决定排列方向
float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式
3.制作摄影社区热门小镇页面（页面效果及页面中的图片、字体颜色等参见提供的作业素材），要求如下。

使用<div和无序列表相结合的方法布局HTML文档。
使用float属性创建横向多列排版网页元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>摄影社区热门小镇</title>
    <link rel="stylesheet" href="DJ7word3.css" type="text/css">
</head>
<body>
<div>
    <h1>摄影社区热门小镇</h1>
    <ul>
        <li class="one">
            <a href="#"><img src="pic_01.jpg"></a>
            <h2>风景狙击手</h2>
            <ul>
                <li>成员：80</li>
                <li>作品：276</li>
            </ul>
        </li>
        <li class="one">
            <a href="#"><img src="pic_02.jpg"></a>
            <h2>叙事感</h2>
            <ul>
                <li>成员：235</li>
                <li>作品：116</li>
            </ul>
        </li>
        <li class="one">
            <a href="#"><img src="pic_03.jpg"></a>
            <h2>定焦视界</h2>
            <ul>
                <li>成员：56</li>
                <li>作品：456</li>
            </ul>
        </li>
        <li class="one">
            <a href="#"><img src="pic_04.jpg"></a>
            <h2>中画幅乐园</h2>
            <ul>
                <li>成员：130</li>
                <li>作品：239</li>
            </ul>
        </li>
        <li class="one">
            <a href="#"><img src="pic_05.jpg"></a>
            <h2>《卡啪》先锋...</h2>
            <ul>
                <li>成员：78</li>
                <li>作品：125</li>
            </ul>
        </li>
        <li class="one">
            <a href="#"><img src="pic_06.jpg"></a>
            <h2>植物的无声世界</h2>
            <ul>
                <li>成员：235</li>
                <li>作品：1258</li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

body,div,h3,ul,li{
    margin: 0px;
    padding: 0px;
}
div{
    width:660px;
    border: 1px solid #d8d8d8;
    box-sizing: border-box;
    overflow:hidden;
    margin: 50px auto;
}
h1{
    font-size: 14px;
    color: #999999;
    line-height: 35px;
    padding-left: 10px;
}
h2{
    font-size: 14px;
    color: #2e75bc;
    line-height: 30px;
    margin-top: 3px;
}
li{
    list-style:none;
    color: #999999;
    line-height: 20px;
}
.one{
    float: left;
    width:216px;
    height:99px;
    overflow: hidden;
}
.one img{
    margin:10px 15px 0 10px;
    float:left;
    padding:3px;
    border:1px solid #ccc;
    border-radius: 6px;
}

4.制作名人名言页面（完整的页面效果图参见提供的作业素材）。要求如下。

使用headder、article、section、nav、footer等结构元素布局。
使用float属性创建横向多列布局。
使用无序列表制作导航菜单，并使用盒子属性美化菜单，当鼠标移至导航菜单上时显示下划线。
使用标题标签排版网页中的各级标题。
页面的完整效果及页面中字体样式。颜色等参见提供的作业素材。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>名人名言</title>
    <link rel="stylesheet" href="DJ7word4.css" type="text/css">
</head>
<body>
<div class="whole">
    <!--头部-->
    <div class="one">
        <h1>名人名言</h1>
        <h2>分享名人名言，开始一段触动心灵的智慧之旅跳到内容</h2>
        <ul>
            <li><a href="#">登录</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">名人名言</a></li>
            <li><a href="#">英文名言(English)</a></li>
            <li><a href="#">心理杂志</a></li>
            <li><a href="#">心理书籍</a></li>
            <li><a href="#">专题活动</a></li>
            <li><a href="#">发表</a></li>
        </ul>
        <p><hr/></p>
    </div>
    <!--主体左-->
    <div class="left">
        <div class="two">
            <h1>心理学经典名言的智慧</h1>
            <h2>洞察人性的美与丑，认识自我的强与弱。一句好的格言能够穿越时间，永不失色、历久弥香，它总是能给人们带来心灵的滋养。</h2>
        </div>
        <div class="three">
            <h1>创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。 </h1>
            <h2>创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。 </h2>
            <h2>发表在 未分类 | 标签： 《换个脑袋去思考》, 创造力 | 留下评论</h2>
        </div>
        <div class="four">
            <h1>作者简介</h1>
        </div>
        <div class="three">
            <h1>如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。</h1>
            <h2>如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。</h2>
            <h2>发表在 未分类 | 标签： 《怎样出售设计创意》, 温斯顿·丘吉尔 | 留下评论</h2>
        </div>
        <div class="five">
            <h1>赞助广告</h1>
            <img src="ad_2.jpg">
        </div>
    </div>
    <!--主体右-->
    <div class="six">
        <ul>
            <li>赞助广告</li>
            <li><img src="ad.jpg"></li>
            <li>搜索</li>
            <li><input type="search" placeholder="点击搜索" "></li>
            <li>标签</li>
            <li>60年语录 《犯罪心理》 世间百态 二十四史传统名人 体育人物 卡斯特罗 卡斯特罗名言 卡斯特罗语录 历史 友谊爱情 古代格言 名人名言 名人随语 教子立人 新闻事件 李白 爱情语录 韩寒语录</li>
        </ul>
    </div>
</div>
</body>
</html>

body,div,ul,li{
    margin: 0px;
    padding: 0px;
}
/*设置整体*/
.whole{
    height: 1000px;
    width: 1000px;
    border: 1px #999999 solid;
    margin: auto;
    padding: 10px 50px;
    clear: right;
}
.left{
    width: 550px;
    float: left;
}
/*设置头部*/
.one{
    margin-left: 30px;
    width: 100%;
    margin-bottom: 50px;
    height: 100px;
}
.one h1{
    font-size: 30px;
    color: #000;
}
.one h2{
    color: #999999;
    font-size: 14px;
}
.one li{
    list-style:none;
}
.one a{
    font-size: 14px;
    padding: 8px;
    float: left;
    color: #999999;
    text-decoration: none;
    border: 1px #999999 solid;
}
.one a:hover{
    color: #999999;
    text-decoration: underline;
}
.one p{
    padding-top: 15px;
    float: bottom;
}
.two{
    border: 1px #999999 solid;
    float: left;
    width: 520px;
}
.two h1{
    font-size: 20px;
    color: #000;
}
.two h2{
    font-size: 14px;
    color: #999999;
}
.three{
    margin-top: 10px;
    float: left;
    width: 520px;
}
.three h1{
    font-size: 14px;
    color: #000;
}
.three h2{
    font-size: 14px;
    color: #999999;
}
.four{
    border: 1px #999999 solid;
    width: 520px;
    float: left;
}
.four h1{
    font-size: 20px;
    color: black;
}
.five{
    width: 520px;
    float: left;
    border: 1px #999999 solid;
}
.five h1{
    font-size: 14px;
    color: black;
}
.six{
    float: right;
    border: 1px #999999 solid;
    width: 400px;
    padding: 5px 10px;
}
.six li{
    list-style:none;
    color: #999999;
    font-size: 14px;
    font-style: oblique;
    padding-top: 10px;
}

5.制作彩妆热卖产品列表页面（页面效果、背景图片、分割线颜色样式、背景颜色、字体颜色等页面样式参见提供的上机练习素材），要求如下。

页面背景颜色为浅黄色，彩妆热卖产品列表背景颜色为白色。
标题放在段落标签中，标题背景颜色为桃红色，字体颜色为白色。
使用无序列表<ul制作彩妆热卖产品列表，两个产品列表之间使用虚线隔开。
超链接字体颜色为灰色，无下划线，数字颜色为白色，数字背景为灰色背景。
当鼠标移至超链接上时，超链接字体颜色为桃红色，无下划线，数字颜色为白色，数字背景为桃红色圆圈，并且显示产品对应的图片、价格和当前已购买人数。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
        <title>彩妆热卖产品列表</title>
        <link href="../Semester1book3DJ7/DJ7word5.css" rel="stylesheet" type="text/css"/>
    </head>
<body>
<div class="whole">
    <p class="p">大家都喜欢的彩妆</p>
    <ul>
        <li><a href="#"><span>1</span>Za姬芮新能真皙美白隔离霜 35g
        <div><img src="icon-1.jpg" alt="Za姬芮新能真皙美白隔离霜"/>
            <p>￥62.00 最近69122人购买</p>
        </div>
        </a></li>
        <li><a href="#"><span>2</span>美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml
            <div><img src="icon-1.jpg" alt="美宝莲精纯矿物奇妙新颜乳霜BB霜"/>
                <p>￥89.00 最近13610人购买</p>
            </div>
        </a></li>
        <li><a href="#"><span>3</span>菲奥娜水漾CC霜 40g
            <div><img src="icon-1.jpg" alt="菲奥娜水漾CC霜"/>
                <p>￥59.90 最近13403人购买</p>
            </div>
        </a></li>
        <li><a href="#"><span>4</span>DHC 蝶翠诗橄榄卸妆油 200ml
            <div><img src="icon-1.jpg" alt="DHC 蝶翠诗橄榄卸妆油"/>
                <p>￥169.00 最近16757人购买</p>
            </div>
        </a></li>
    </ul>
</div>
</body>
</html>

body,div,p,ul,li{
    padding: 0px;
    margin: 0px;
}
ul,li{
    list-style-type: none;
}
body{
    background-color: #eee7e1;
    font-size: 12px;
}
img{
    border: 0px;
}
.whole{
    width: 255px;
    background-color: #fff;
}
.p{
    background-color: #e9185a;
    font-size: 14px;
    color: #fff;
    height: 35px;
    line-height: 35px;
    padding-left: 10px;
    font-weight: bold;
}
.whole li{
    border-bottom: 1px #999 dashed;
    line-height: 30px;
    padding-left: 2px;
}
.whole li div{
    display: none;
    text-align: center;
}
.whole li a{
    text-decoration: none;
    color: #999;
}
.whole li a:hover{
    color: #e9185a;
}
.whole li a:hover div{
    display: block;
}
.whole li a span{
    color:#FFF;
    font-weight:bold;
    margin-right: 10px;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #373b3c;
    line-height: 20px;
    text-align: center;
}
.whole li a:hover span{
    color: #fff;
    background-color: #e9185a;
}

一江风雪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
作业一学期三书七章

1.清除浮动的方法有哪几种？分别如何实现？（1）浮动元素后面加空div（2）设置父元素的高度（3）父级添加overflow属性（4）父级添加伪类2.使用display：inlink-block或float布局页面有什么区别？需要注意什么？（1）display:inline-block可以让元素排在一行，并且支持宽度和高度，代码实现起来方便位置方向不可控制，会解析空格，IE 6、IE...
复制链接

扫一扫