----web前端实验二

最新推荐文章于 2024-07-12 14:38:32 发布

TobEABetterMan_

最新推荐文章于 2024-07-12 14:38:32 发布

阅读量467

点赞数

分类专栏： html demo 文章标签： css html

本文链接：https://blog.csdn.net/TobEABetterMan_/article/details/115085442

版权

html demo 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

学习目标：

前两道

第一题：

提示：仅做参考，记得修改class 和 id

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset='utf-8'>
        <title>Document-2</title>
    </head>
    <body>
        <div id="root">
            <ul class="liLists">
                <li class="liList">
                    <img src="../assets/4.jpg"/>
                    <div id="container">
                        <p class="listOne">不只有看肤色挑唇色 选对口红衣服更美</p>
                        <p class="listTow"><span class="list1">标签</span><span class="list-box">唇膏</span><span class="list-box">衣服</span><span class="list-box">粉色</span><span class="list-box">化妆</span><span class="list-box2">美容美体</span></p>
                        <p class="listThree"><i>悦己self</i>2016-10-18</p>
                    </div>
                </li>
                <li class="liList">
                    <img src="../assets/5.jpg"/>
                    <div id="container">
                        <p class="listOne">学画红唇妆 让你的女王范分分钟秒杀路人</p>
                        <p class="listTow"><span class="list1">标签</span><span class="list-box">唇膏</span><span class="list-box">衣服</span><span class="list-box">粉色</span><span class="list-box">化妆</span><span class="list-box2">美容美体</span></p>
                        <p class="listThree"><i>毛戈平形象艺术学院</i>2016-10-18</p>
                    </div>
                </li>
                <li class="liList">
                    <img src="../assets/6.jpg"/>
                    <div id="container">
                        <p class="listOne">不只有看肤色挑唇色 选对口红衣服更美</p>
                        <p class="listTow"><span class="list1">标签</span><span class="list-box2">美容美体</span></p>
                        <p class="listThree"><i>八公举</i>2016-10-18</p>
                    </div>
                </li>
            
            </ul>
        </div>
    </body>
<style>
*{
    padding: 0;
    margin: 0;
}
.liLists{
    width: 860px;
    height: 600px;
    margin: 0 auto;
}
.liLists .liList{
    list-style: none;
    border: 2px solid #ccc;
    height: 130px;
}
.liLists .liList:hover{
    background-color: #F8F8F8;
}
.liLists .liList .listOne{
    width: 500px;
    font-size: 20px;
    color: black;
    margin-bottom: 10px;
}
.liLists .liList .listTow{
    width: 500px;
    display: flex;
    flex-direction:row;
}
.liLists .liList .listTow .list1{
    color: #cccc00;
    font-size: 16px;
    margin-right: 10px;
}
.liLists .liList .list-box{
    text-align: center;
    width: 35px;
    display: block;
    background-color: #eee;
    color: #999;
    font-size:14px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.liLists .liList .list-box2{
    text-align: center;
    width: 70px;
    display: block;
    background-color: #eee;
    color: #999;
    font-size:14px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.liLists .liList .listThree i{
    font-style: normal;
    border: 1px solid #eee;
    border-radius: 25px;
    margin-right: 20px ;
}
.liLists .liList .listThree{
    width: 500px;
    color: #999;
    font-size: 14px;
}
.liLists .liList img{
    height: 100px ;
    width:180px ;
    float: left;
    margin-top:10px
}
#container{
    margin: 20px;
    float: left;
}

</style>
</html>

运行图片如下：
在这里插入图片描述

第二题：

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset='utf-8'>
        <title>Document-2</title>
    </head>
    <body>
        <div id="root">
            <div id="header"><a class="header_one" href="">首页</a><a href="">新闻</a><a href="">体育</a><a href="">娱乐</a><a href="">财经</a><a href="">科技</a><a href="">手机</a><a href="">数码</a></div>
            <div id="content">
                <div class="content1">
                    <h2>娱乐新闻</h2>
                    <div class="content-box1">
                        <p>香港已经没有黑帮，大家都不想在里面混</p>
                        <p>《碟中谍5》曝外景地花絮</p>
                        <p>灾难发生后该不该禁播娱乐节目</p>
                        <p>多部好莱坞大片登陆中国</p>
                    </div>
                    <div class="content-box2">
                        <p>2018-10-1</p>
                        <p>2018-10-1</p>
                        <p>2018-10-1</p>
                        <p>2018-10-1</p>
                    </div>
                </div>
                <div class="content1">
                    <h2>军事新闻</h2>
                    <div class="content-box1">
                        <p>2018阅兵在9月3日09:00开始</p>
                        <p>对县委书记十二句严厉告诫</p>
                        <p>日本网站</p>
                        <p>中国坦克打先锋巴铁反恐精锐尽出</p>
                    </div>
                    <div class="content-box2">
                        <p>2018-10-1</p>
                        <p>2018-10-1</p>
                        <p>2018-10-1</p>
                        <p>2018-10-1</p>
                    </div>
                </div>
                <div class="content1">
                    <h2>数码新闻</h2>
                    <div class="content-box1">
                        <p>微软已在秘密测试Android版Edge浏览</p>
                        <p>平板电脑五年走到市场拐点</p>
                        <p>苹果邀请函解密Hint有新释义</p>
                        <p>IDF2018英特尔谷歌联手</p>
                    </div>
                    <div class="content-box2">
                        <p>2018-10-1</p>
                        <p>2018-10-1</p>
                        <p>2018-10-1</p>
                        <p>2018-10-1</p>
                    </div>
                </div>
                <div class="content1">
                    <h2>手机新闻</h2>
                    <div class="content-box1">
                        <p>超大运行内存手机推荐</p>
                        <p>国产旗舰手机盘点</p>
                        <p>西门子归来，首款智能机配置强跑分出色</p>
                        <p>骗子植入手机木马的10大招数</p>
                    </div>
                    <div class="content-box2">
                        <p>2018-10-1</p>
                        <p>2018-10-1</p>
                        <p>2018-10-1</p>
                        <p>2018-10-1</p>
                    </div>
                </div>
            </div>
            <div id="footer">
                <a class="a_one" href="">关于我们</a><a class="a_two" href="">联系我们</a>
            </div>
        </div>

    </body>
<style>

#header {
    width: 1200px;
    height: 30px;
    background-color:#8B8B7A;
}
#header a{
    color: white;
    font-style: normal;
    margin-left: 50px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
}
#header .header_one {
    color: red;
}
#content {
    width: 1200px;
    height: 700px;
}
#content .content1{
    width: 600px;
    height: 300px;
    display: block;
    float: left;
}
#content .content1 .content-box1{
    display: block;
    width: 300px;
    height: 150px;
    float: left;
    margin-left:30px ;
}
#content .content1 .content-box2{
    display: block;
    width: 200px;
    height: 100px;
    float: left;
    margin-left:40px ;
}
#footer .a_one{
    position: absolute;
    color: black;
    margin-right:20px ;
    bottom: 30%;
    left: 25%;
    font-weight: bold;
}
#footer .a_two{
    position: absolute;
    color: black;
    margin-right:20px ;
    bottom: 30%;
    left: 30%;
    font-weight: bold;
}

</style>
</html>

图片如下：
在这里插入图片描述

TobEABetterMan_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
----web前端实验二

学习目标：前两道第一题：提示：仅做参考，记得修改class 和 id<!DOCTYPE html><html lang = "en"> <head> <meta charset='utf-8'> <title>Document-2</title> </head> <body> <div id="root">
复制链接

扫一扫