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.com 版权所有</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>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
