web实验记录2

是小夢夢啊

已于 2023-10-20 15:33:56 修改

阅读量108

点赞数 1

分类专栏： Web前端课程实验文章标签：前端 css css3 html5 javascript

于 2022-06-15 10:40:35 首次发布

本文链接：https://blog.csdn.net/DoraemonDream/article/details/125292134

版权

Web前端课程实验专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本次实验旨在掌握HTML和CSS的应用，实现特定的页面布局和样式效果。实验内容包括：1)页面内容居中，宽度固定，鼠标悬停列表项显示背景色；2)使用通用、类型、类和ID选择器，设定盒子模型；3)创建div+css布局，实现列表项分割线、文字样式和边框效果。实验通过实际操作，巩固了网页设计的基础知识。

摘要由CSDN通过智能技术生成

实验目的

掌握内联样式、嵌入样式、外部样式
掌握通用选择器、类型选择器、类选择器、Id选择器的使用
掌握盒子模型
掌握div+css布局

实验内容

应用html标签和css完成如下所示页面效果，图片见附件。

说明：
1)内容相对于浏览器居中,宽860px
2)鼠标移动至列表项上，显示背景色#F8F8F8
3)分割线2px solid #ccc，每项高130px
4)第一行文字：20px 黑体
5)标签：字颜色#cccc00 16px
6)标签项：背景颜色#eee 字体颜色#999 文字大小14px
7)第三行文字：边框1px solid #eee; 圆角半径25px

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实验2-1</title>
    <link rel="stylesheet" href="../index/Ex2-css1.css">
</head>
<body>
    <ul>
        <li class="li">
            <hr align="center" size="2px" color="#ccc">
            <img src="../images2/4.jpg" alt="">
            <div>
            <p>不只是看肤色挑唇色 选对口红衣服更美</p>
            <br>
            <label class="label1">标签</label>
            <label class="label2">唇膏</label>
            <label class="label2">衣服</label>
            <label class="label2">粉色</label>
            <label class="label2">化妆</label>
            <label class="label2">美容美体</label>
            <br><br>
            <label class="label3">悦己self</label><span>  2016-10-18</span>
            </div>
        </li>
        <li class="li">
            <hr align="center" size="2px" color="#ccc">
            <img src="../images2/5.jpg" alt="">
            <div>
            <p>学画红唇妆 让你的女王范分分钟秒杀路人</p>
            <br>
            <label class="label1">标签</label>
            <label class="label2">唇膏</label>
            <label class="label2">衣服</label>
            <label class="label2">粉色</label>
            <label class="label2">化妆</label>
            <label class="label2">美容美体</label>
            <br><br>
            <label class="label3">毛戈平形象艺术学校</label><span>  2016-10-18</span>
            </div>
        </li>
        <li class="li">
            <hr align="center" size="2px" color="#ccc">
            <img src="../images2/6.jpg" alt="">
            <div>
            <p>无数次给国外博主跪了 把自己的脸画成漫画人物好逼真</p>
            <br>
            <label class="label1">标签</label>
            <label class="label2">美容美体</label>
            <br><br>
            <label class="label3">八公举</label><span>  2016-10-18</span>
            </div>
        </li>
    </ul>
</body>
</html>

CSS:

ul{
    margin: 0 auto;
    width: 860px;
}

.li{
    list-style-type: none;
    height: 140px;
    position: relative;
    margin-top: 10px;
}
.li:hover{
    background-color: #f8f8f8;
}
div{
    display: inline-block;
    height: 130px;
    position: absolute;
    left: 200px;
    margin-left: 20px;
}
p{
    font-size: 20px;
    font-family: 黑体;
    margin-top: 10px;
    margin-bottom: 0px;
}
.label1{
    font-size: 16px;
    color: #cccc00;
}
.label2{
    background-color: #eee;
    font-size: 14px;
    color: #999;
}
.label3{
    font-size: 14px;
    color: #999;
    border: 1px solid #eee;
    border-radius: 25px;
}
span{
    font-size: 14px;
    color: #999;
}
img{
    height: 130px;
}

完成如图所示界面布局和显示效果

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实验2-2</title>
    <link rel="stylesheet" href="./test.css">
</head>
<body>
    <div id="box">
        <ul>
            <li class="choose">首页</li>
            <li>新闻</li>
            <li>体育</li>
            <li>娱乐</li>
            <li>财经</li>
            <li>科技</li>
            <li>手机</li>
            <li>数码</li>
        </ul>
    </div>
    <div class="div1">
        <label>娱乐新闻</label>
        <ul>
            <li>香港已没有黑帮 大家都不想在里面混</li><span>2018-10-1</span>
            <li>《碟中谍5》眼外景地花絮</li><span>2018-10-1</span>
            <li>灾难发生后该不该禁播娱乐节目</li><span>2018-10-1</span>
            <li>多部好菜坨大片登陆中国</li><span>2018-10-1</span>
        </ul>
    </div>
    <div class="div1">
        <label>军事新闻</label>
        <ul>
            <li>内容在这里添加</li><span>2018-10-1</span>
            <li>内容在这里添加</li><span>2018-10-1</span>
            <li>内容在这里添加</li><span>2018-10-1</span>
            <li>内容在这里添加</li><span>2018-10-1</span>
        </ul>
    </div>
    <div class="div1">
        <label>数码新闻</label>
        <ul>
            <li>微软已在秘密测试Android版Edge浏览器</li><span>2018-10-1</span>
            <li>平板电脑五年走到市场拐点</li><span>2018-10-1</span>
            <li>苹果邀请函解密Hint有新释义</li><span>2018-10-1</span>
            <li>IDF2018英特尔谷歌联手</li><span>2018-10-1</span>
        </ul>
    </div>
    <div class="div1">
        <label>手机新闻</label>
        <ul>
            <li>超大运行内存手机推荐</li><span>2018-10-1</span>
            <li>国产旗舰手机盘点</li><span>2018-10-1</span>
            <li>西门子归来首款智能机配暨强跑分出色</li><span>2018-10-1</span>
            <li>骗子植入手机木马的10大招术</li><span>2018-10-1</span>
        </ul>
    </div>
    <div class="div2">
        <span>关于我们</span>
        <span>联系我们</span>
    </div>
</body>
</html>

CSS：

#box{
    background-color: #fc6;
    margin: 0 auto;
    height: 40px;
}

#box ul{
    list-style-type: none;
}
#box ul li{
    width: 80px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    float: left;
    text-decoration: underline;
    margin-left: 40px;
}
#box ul li.choose{
    color: red;
}
#box ul li.hover{
    cursor: pointer;
}
#box ul li a{
    text-decoration: underline;
    color: red;
}
.div1{
    float: left;
    width: 600px;
    height: 200px;
    margin: 30px;
    margin-left: 70px;
    margin-top: 60px;
    position: relative;
}
.div1 label{
    font-weight: bold;
    font-size: 20px;
}
.div1 li{
    list-style-type: none;
    line-height: 40px;
}
.div1 span{
    position: absolute;
    right:0%;
    margin-top: -30px;
}
.div2{
    height: 30px;
    position: absolute;
    bottom: 0%;
    left: 45%;
}
.div2 span{
    text-decoration: underline;
}

完成如下表单界面设计，图片见附件。

说明：
1)表单宽248px，高220px，背景色#F5EAE8，上下内边距30px 左右内边距40px，边框1px solid #F5EAE8
2)输入框宽250px，高38px，边框1px solid #CCC，下外边距30px。文本缩进50px，便于显示前方图标。前方图标可考虑背景图片进行设置。
3)按钮宽255px，高44px，外边距上下25px，左右居中
4)合作网站区域宽330px 高145px，背景颜色#F5EAE8，上边框1px solid #ddd
5)内容居中显示

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实验2-3</title>
    <link rel="stylesheet" href="../index/Ex2-css3.css">
</head>
<body>
    <form action="">
        <input id="input1" type="text" name="UserName" maxlength="10" placeholder="用户名/邮箱地址/手机号"><br>
        <input id="input2" type="password" name="UserPsd" maxlength="16" placeholder="填写密码"><br>
        <input type="checkbox" name="RemPsd" value="Psd"> 
        <label style="font-size: 12px; font-weight: bold;">记住密码</label>
        <label> &nbsp;&nbsp;欢迎注册</label> <label>&nbsp;&nbsp;忘记密码</label>
        <input id="register" type="submit" value="登录" style="color:white">
        <div>
            <span>合作网站账号登录：</span>
            <img src="../images2/weixin.png" alt="">
            <img src="../images2/qqlogin.png" alt="">
            <img src="../images2/taobao.png" alt="">
        </div>
    </form>
</body>
</html>

CSS：

form{
    width: 248px;
    height: 220px;
    background-color: #F5EAE8;
    margin: 0 auto;
    padding: 30px 40px;
    border: 1px solid #F5EAE8;
    position: relative;
}

#input1{
    width: 250px;
    height: 38px;
    border: 1px solid #ccc;
    margin-bottom: 30px;
    text-indent: 50px;
    background-image:url(../images2/zhanghao.jpg);
    background-repeat: no-repeat;
}
#input2{
    width: 250px;
    height: 38px;
    border: 1px solid #ccc;
    margin-bottom: 30px;
    text-indent: 50px;
    background-image: url(../images2/mima.jpg);
    background-repeat: no-repeat;
}
label{
    font-size: 12px;
}
#register{
    width: 255px;
    height: 44px;
    margin: 25px auto;
    background-color: red;
}
div{
    text-align: center;
    width: 330px;
    height: 145px;
    background-color: #F5EAE8;
    border-top: 1px solid #ddd;
    position: absolute;
    top: 280px;
    left: -1px;
}
div span{
    font-size: 12px;
    font-weight: bold;
}
img{
    margin-top: 20px;
}