文章目录
📄题目要求
🧩说明
🧩效果图
🧩补充：题目文件结构
💻HTML代码—首页index.html
💻CSS代码—CSS文件index.css
🎯实现效果
📰完整答案
📄题目要求
阅读下列说明、效果图和HTML代码，进行静态网页开发，填写（1）至（11）代码。🧩说明
这是某电商类网站服装商品展示页面局部，该网站正在促销秋冬季女装。现在我们需要编写该网站效果图部分代码。项目名称为shopping，包含首页index.html、css文件夹、img文件夹，其中，css文件夹包含index.css文件；img文件夹包含img1.jpg、img2.jpg、img3.jpg、img4.jpg、img5.jpg图片。🧩效果图
🧩补充：题目文件结构
💻HTML代码—首页index.html
<!DOCTYPE html><html><head><title>第一题</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="css/index.css"></head><body><div class="box"><div class="con"><!-- (1) 填入适当标签 --><!-- <(1) class="clear"> --><ul class="clear"><li><img src="img/img1.jpg"><p>微胖连衣裙</p></li><li><img src="img/img2.jpg"><p>网红初秋女装</p></li><li><img src="img/img3.jpg"><p>黑色休闲裤</p></li><li><img src="img/img4.jpg"><p>韩版学生女装</p></li><li><img src="img/img5.jpg"><p>原创设计女装</p></li><!-- （2） 填入适当标签--><!-- </(2)> --></ul></div></div></body></html>
💻CSS代码—CSS文件index.css
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{margin: 0;padding:0;}/* （3）（4）清理默认li样式 */ul{/* (3):(4); */list-style: none;}/* （5）（6） 显示为块级元素*/img{/* (5):(6); */display: block;}/* （7）（8）清理左右浮动 */.clear:after{content: "";display: block;/* (7):(8); */clear: both;}.box{width: 100%;}.box .con{width: 1375px;margin:0 auto;}.box .con ul{padding-top:30px;}/* （9）（10）设置为左浮动 */.box .con ul li{/* (9):(10); */float: left;width: 250px;margin:0 22px 22px 0;border:1px solid #eee;}.box .con ul li img{margin:15px auto 0;}.box .con ul li p{padding:15px;}/* （11）鼠标进入添加1像素的红色实线 *//* .box .con ul li:(11) { */.box .con ul li:hover {border:1px solid red;}
🎯实现效果
📰完整答案
试题一（22分）
【问题】（22分）
（1）ul
（2）ul
（3）list-style
（4）none
（5）display
（6）block
（7）clear
（8）both
（9）float
（10）left
（11）hover
（每空2分，共22分）
🎯点赞收藏，防止迷路🔥
