文章目录
📄题目要求
🧩说明
🧩效果图
🧩补充:题目文件结构
💻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分)
🎯点赞收藏,防止迷路🔥