HTML+CSS刷题练习"/>
HTML+CSS刷题练习
1. 请将html模块的div元素设置为一个半径是50px的圆，且边框为1px的黑色实线。
要求：
1. 圆角属性仅设置一个值
2. 圆角属性单位请使用px
注意：由于圆角属性设置广泛且都可以实现题目效果，所以请按照要求规范书写
<html><head><meta charset=utf-8><style type="text/css">/*补全代码*/div{width:100px;height:100px;border:1px solid black;border-radius:50px
}</style></head><body><div></div></body>
</html>2. 请将html模块类为"box"的div元素宽度和高度都设置为100px，且内间距为20px、外间距为10px
<html><head><meta charset=utf-8><style type="text/css">.box{border: 1px solid black;width:100px;height:100px;padding:20px;margin:10px;}</style></head><body><div class="box"></div></body>
</html>3. 请利用html、css完成以下效果图
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}.body{height: 470px;width: 100%;}.fen{height: 100px;width: 100%;background-color: pink;}.blue{height: 300px;width: 25%;background-color: skyblue;}.yellow{height: 300px;width: 75%;background-color: orange;}.body-two{height: 300px;width: 100%;}.green{height: 70px;width: 100%;}</style></head><body><div class="body"><div class="fen"></div><div class="body-two"><div class="blue"></div><div class="yellow"></div></div><div class="green"></div></div></body>
</html>
4. 完成以下效果图
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试1-3</title><style type="text/css">.header{height: 100px;background-color: pink;}.footer{background-color: #20B2AA;height: 50px;}.content{height: 300px;}.content .left{width: 25%;height: 100%;float: left;background-color: skyblue;}.content .right{width: 75%;height: 100%;float: right;background-color: orange;}</style></head><body><div class="header">高度为100px，背景色为pink</div><div class="content"><div class="left">宽度为25%，高度300px，背景色skyblue</div><div class="right">宽度为75%，高度300px，背景色orange</div></div><div class="footer">高度为70px，背景色为#20B2AA</div></body>
</html>
5. 摄影社区热门小镇，效果图如下：
<!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>摄影社区热门小镇</title><style>*{padding: 0;margin: 0;margin: 0px auto;}li{list-style: none;}h3{color: #4d4d4d;padding-top: 12px;padding-left: 12px;padding-bottom: 22px;}.box{width: 660px;height: 234px;border: 1px solid #d8d8d8;overflow: hidden;}.bottom{height: 200px;width: 660px;float: left;padding: 0px 22px 36px 12px;}.bottom .one{width: 220px;height: 90px;float: left;}.bottom .one .tp{width: 60px;height: 60px;/* box-shadow: 0px 0px 4px 4px #4d4d4d;设置阴影 */border-radius: 7%;border: 1px solid #4d4d4d;padding: 6px 6px;/* display: inline-block; */float: left;}.bottom .one .wb{float: left;font-size: 13px;line-height: 24px;color: #999999;margin-left: 16px;display: block;}.bottom .one .wb ul li:nth-child(1){font-size: 15px;color: #2e75bc;}</style>
</head>
<body><div class="box"><h3>摄影社区热门小镇</h3><div class="bottom"><div class="one"><div class="tp"><img src="img/pic_01.jpg" alt=""></div><div class="wb"><ul><li>风景狙击手</li><li>成员:80</li><li>作品:276</li></ul></div></div><div class="one"><div class="tp"><img src="img/pic_02.jpg" alt=""></div><div class="wb"><ul><li>叙事感</li><li>成员:80</li><li>作品:116</li></ul></div></div><div class="one"><div class="tp"><img src="img/pic_03.jpg" alt=""></div><div class="wb"><ul><li>定焦视界</li><li>成员:56</li><li>作品:456</li></ul></div></div><div class="one"><div class="tp"><img src="img/pic_04.jpg" alt=""></div><div class="wb"><ul><li>中画幅乐园</li><li>成员:130</li><li>作品:239</li></ul></div></div><div class="one"><div class="tp"><img src="img/pic_05.jpg" alt=""></div><div class="wb"><ul><li>《卡帕》先锋</li><li>成员:78</li><li>作品:125</li></ul></div></div><div class="one"><div class="tp"><img src="img/pic_06.jpg" alt=""></div><div class="wb"><ul><li>植物的无声世界</li><li>成员:235</li><li>作品:1258</li></ul></div></div></div></div>
</body>
</html>6. 仿新东方导航菜单
图片资源：
效果图：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>新东方顶部导航菜单</title><style>body{width: 800px;margin: auto;}.father>ul{background: url(img/logo.gif) no-repeat;background-color: rgba(255,0,0,0.5);background-position-x: 5px;position: relative;}.father ul li{display: inline-block;font-size: 12px;margin: 6px 0px;margin-left: 10px;padding-right: 10px ;}.father ul li:nth-of-type(1){border-right: 1px dashed #A9A9A9;}.father ul li:nth-of-type(2){border-right: 1px dashed #A9A9A9;}.father ul li:nth-of-type(3){border-right: 1px dashed #A9A9A9;}.father ul li:nth-of-type(4){border-right: 1px dashed #A9A9A9;}.father ul li:nth-of-type(5){border-right: 1px dashed #A9A9A9;}.father ul li:nth-of-type(6),img{vertical-align: top;}.hh{margin-left: 150px ;}.div1{width: 250px;background-color: white;border: 1px solid black;position: absolute;right: 80px;top: 28px;}.div1 ul li{display: inline-block;font-size: 12px;padding-right: 10px ;}.div1 ul:nth-of-type(1){padding-bottom: 15px;border-bottom: 1px dashed black ;}.div1 ul:nth-of-type(2){padding-bottom: 15px;border-bottom: 1px dashed black ;box-shadow: hsl();text-shadow: hsl();}a{text-decoration:none;}a:hover{color: yellow;}.father li .div1{display: none;}.father ul>li:nth-of-type(6):hover .div1{display: block;}</style></head><body><div class="father"><ul type="none"><li><div class="hh">购物车</div></li><li>优惠券</li><li>快速注卡</li><li>各地购课</li><li>手机报</li><li><span>网站导航 <img src="img/open_icon.gif"/></span><div class="div1"><ul type="none"><li><a href="#">托福 </a></li><li><a href="#">雅思</a></li><li><a href="#">考研</a></li><li><a href="#">职称英语</a></li><li><a href="#">初中</a></li><li><a href="#">日语</a></li></ul><ul type="none"><li><a href="#">网络课堂</a> </li><li><a href="#">资讯中心</a></li><li><a href="#">知识堂</a> </li><li><a href="#">大师讲坛</a></li><li><a href="#">学习论坛</a></li><li><a href="#">学词 </a></li><li><a href="#">考研搜校</a></li></ul><ul type="none"><li><a href="#">M-Zone</a> </li><li><a href="#">手机报</a></li><li><a href="#">时时英语</a></li></ul></div></li></ul></div></body>
</html>7. 京东登录页面
图片资源：
效果图：
HTML：
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>京东登录页</title><link rel="stylesheet" type="text/css" href="css/0508制作京东登录页面.css"/>
</head>
<body>
<header class="wrap"><div class="logo-box"><h1 class="left"><a href="" ><img src="img/logojt.png" alt="LOGO"/></a></h1><span class="left logo-r">欢迎登录</span></div>
</header><article class="content"><div class="wrap"><div class="login-box"><div class="login-form"><h2>京东会员<a href="">立即注册</a></h2><form action="" method="post" id="loginForm"><div class="item"><label class="nick left"></label><input type="text" name="nick" placeholder="邮箱/用户名/已验证手机"/></div><div class="item"><label class="psw left"></label><input type="password" name="psw"/></div><div class="item2"><input type="checkbox" name="auto" id="auto"/><label for="auto">自动登录</label><a href="">忘记密码?</a></div><a href="" class="login-btn">登 录</a></form></div></div></div>
</article>
<footer class="wrap footer"><div class="link"><a href="">关于我们</a>|<a href="">联系我们</a>|<a href="">人才招聘</a>|<a href="">商家入驻</a>|<a href="">广告服务</a>|<a href="">手机京东</a>|<a href="">友情链接</a>|<a href="">销售联盟</a>|<a href="">京东社区</a>|<a href="">京东公益</a>|<a href="">English Site</a></div><div class="copy">Copyright©2004-2017 京东JD 版权所有</div>
</footer>
</body>
</html>
css：
* {padding: 0;margin: 0;
}a {text-decoration: none;color: #666;
}a:hover {text-decoration: underline;color: #b61d1d;
}body,
html {font: 12px/1.5 "微软雅黑", Arial;color: #666;
}.wrap {width: 990px;margin: 0 auto;
}.left {float: left;
}.right {float: right;
}.logo-box {height: 60px;padding-top: 10px;
}.logo-r {font-size: 24px;padding-left: 20px;margin-top: 10px;
}.content {background: #e93854;margin-top: 15px;
}.login-box {height: 475px;background: url(../img/bannerjt.png) no-repeat left top;
}.login-form {float: right;margin-top: 40px;width: 306px;padding: 20px;background: #fff;
}.login-form h2 {font-weight: normal;font-size: 20px;height: 27px;margin-bottom: 25px;
}.login-form h2 a {font-size: 14px;color: #b61d1d;padding-left: 21px;line-height: 29px;float: right;background: url(../img/icon5jt.jpg) 0 center no-repeat;
}.login-form .item {height: 38px;margin-bottom: 20px;border: 1px #bdbdbd solid;
}.item input {float: left;border: 0 none;padding: 10px 0 10px 10px;font-size: 14px;line-height: 18px;width: 255px;color: #999;
}.item label {border-right: 1px #bdbdbd solid;width: 38px;height: 38px;
}.item .nick {background: url(../img/icon1jt.jpg) no-repeat;
}.item .psw {background: url(../img/icon2jt.jpg) no-repeat;
}.item2 {font-size: 0;margin-bottom: 15px;
}.item2 label {font-size: 12px;vertical-align: middle;
}.item2 input {vertical-align: middle;margin-right: 3px;
}.item2 a {float: right;font-size: 12px;
}.login-btn {display: block;height: 35px;line-height: 35px;text-align: center;color: #fff;background: #e4393c;font-size: 18px;
}.login-btn:hover {color: #fff;text-decoration: none;
}.footer {text-align: center;margin-top: 20px;padding-bottom: 30px;
}.link a {margin: 0 10px;
}.copy {margin-top: 8px;
}
8. 人人注册页面
图片资源：
效果图：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>人人网注册页面</title></head><body><img src="img/renren_titile.gif" alt=""/><br/><p>人人网，中国 <strong>最真实、最有效</strong>的社会平台，加入人人网，找回老朋友，结交新朋友。</p>电子邮箱：<input type="email"/><input type="submit" value="提交"/><br/><br/>设置密码:<input type="password" size="30" maxlength="10"/><br/><br/>真实姓名:<input type="text" size="30" maxlength="10"/><br/><br/>性别: <input type="radio" name="sex" value="男" checked/>男<input type="radio" name="sex" value="女"/> 女<br/><br/>生日:<select><option value="1990">1990</option><option value="1991">1991</option><option value="1992">1992</option><option value="1993">1993</option><option value="1994">1994</option><option value="1995">1995</option><option value="1996">1996</option><option value="1997">1997</option><option value="1998">1998</option><option value="1999">1999</option></select>年份<select><option value="一月">一月</option><option value="二月">二月</option><option value="三月">三月</option><option value="四月">四月</option><option value="五月">五月</option><option value="六月">六月</option><option value="七月">七月</option><option value="八月">八月</option><option value="九月">九月</option><option value="十月">十月</option><option value="十一月">十一月</option><option value="十二月">十二月</option><select/>月份<br/><p>为什么要填写我的生日?<p/>我现在<select><option value="请选择身份" cheched>请选择身份</option><option value="医生">医生</option><option value="教师">教师</option><option value="自由职业">自由职业</option><select/>(非常重要）<br/><br/><img src="img/renren_code.gif" alt=""/><a href="#">看不清，换一张</a><br/><br/>验证码：<input type="text" size="30" maxlength="10"/><br/><br/><img src="img/renren.gif" alt=""/></body>
</html>
9. 表格制作购物车，完成下面效果图
要求：
1）鼠标悬停在每一行时，当前行显示颜色为：violet（rgb(238，130，238)），效果如图：
2）鼠标悬停结算按钮时，背景颜色为：sandybrown（rgb(244，164，96)），字体变大，效果如图：
效果图：
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>表格制作购物车</title><style>/* 设置表格字体大小 */table {font-size: 14px;}/* 将单元格之间间隙去掉 */table {border-collapse: collapse; /* 合并表格单元格边框 */width: 70%;margin: auto;color: #888;font-size: larger;text-align: center;}td,th {border-bottom: 1px solid #ccc;padding: 10px;}/* 标题样式 */table caption {font-size: 1.5rem;color: yellowgreen;margin-bottom: 20px;}table th {font-weight: bolder;color: white;}table thead tr:first-of-type {background-color: teal;}/* 隔行变色 */table tbody tr:nth-of-type(even) {background-color: yellowgreen;color: white;}/* 鼠标悬停效果 */table tbody tr:hover {background-color: violet;color: black;}/* 表格底部样式 */table tfoot td {border-bottom: none;color: red;font-size: 1.2rem;}/* 结算按钮 *//* body div:last-of-type {width: 70%;margin: 10px auto;} */button{width: 120px;margin: 10px 240px;}body div:first-of-type button {/* 右浮动，靠右 */float: right;width: 120px;height: 32px;background-color: seagreen;color: white;border: none;/* 设置鼠标样式 */cursor: pointer;}body div:first-of-type button:hover {background-color: sandybrown;font-size: 1.1rem;}</style></head><body><!-- 表格 --><table><!-- 标题 --><caption>购物车</caption><!-- 表格头部 --><thead><tr><th>ID</th><th>品名</th><th>单价/元</th><th>单位</th><th>数量</th><th>金额/元</th></tr></thead><!-- 表格主体 --><tbody><tr><td>SN-1010</td><td>MacBook Pro电脑</td><td>18999</td><td>台</td><td>1</td><td>18999</td></tr><tr><td>SN-1020</td><td>iPhone手机</td><td>4999</td><td>部</td><td>2</td><td>9998</td></tr><tr><td>SN-1030</td><td>智能AI音箱</td><td>399</td><td>只</td><td>5</td><td>1995</td></tr><tr><td>SN-1040</td><td>SSD移动硬盘</td><td>888</td><td>个</td><td>2</td><td>1776</td></tr><tr><td>SN-1050</td><td>黄山毛峰</td><td>999</td><td>斤</td><td>3</td><td>2997</td></tr></tbody><!-- 表格尾部 --><tfoot><td colspan="4">总计：</td><td>13</td><td>35765</td></tfoot></table><!-- 结算按钮 --><div><button>结算</button></div></body>
</html>10.表格制作出差报销单
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表格制作出差报销单</title></head><style>div{background-color: #ffffff;width: 910px;height: 510px;/* border-radius: 20px; *//* box-shadow: 3px 3px 3px 3px #999; */padding: 20px;margin: auto;}td{width: 50px;height:25px;text-align: center;}.ys{font-size: 15px;color: brown;}</style><body><div><table border="1" width="900px" height="500px" rules="all" align="center"><tr><td>姓 名</td><td colspan="2"></td><td>职 别</td><td colspan="2"></td><td >出差事由</td><td colspan="4"></td></tr><tr><td>部门会计签批</td><td colspan="4"></td><td colspan="2">部门经理审核</td><td colspan="4"></td></tr><tr><td colspan="11">出差起止日期自    年    月    日起至    年    月    日止共    天</td></tr><tr><td colspan="2">日期</td><td rowspan="2">起讫地点</td><td rowspan="2">天数</td><td rowspan="2">机票费</td><td rowspan="2">车船费</td><td rowspan="2">市内交通费</td><td rowspan="2">住宿费</td><td rowspan="2">出差补助</td><td rowspan="2">其他</td><td rowspan="2">小计</td></tr><tr><td>月</td><td>日</td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td>合 计</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td colspan="11" class="ys">注：所有费用必须有部门会计和经理签字才可以报销，数额在2000元以上需通过财务经理审批，5000元以上需总经理审批。</td></tr><tr><td colspan="11">总计金额（大写）   万   仟   佰   拾   元   角   分   预支___________元 补助__________元</td></tr></table></div></body>
</html>更多推荐
HTML+CSS刷题练习
发布评论