赞
踩
要实现的效果图片:
代码如下:
<!DOCTYPE html> <html lang="zh-cn"> <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> <link rel="stylesheet" href="css/xj.css"> </head> <body> <div id="con"> <div id="top"> <img src="../新疆景色网页/img/banner.jpg" alt="top图片"> <table> <th> <td><a href="#">菜单1</a></td> <td><a href="#">菜单2</a></td> <td><a href="#">菜单3</a></td> <td><a href="#">菜单4</a></td> <td><a href="#">菜单5</a></td> <td><a href="#">菜单6</a></td> <td><a href="#">菜单7</a></td> <td><a href="#">菜单8</a></td> <td><a href="#">菜单9</a></td> <td><a href="#">菜单10</a></td> </th> </table> </div><!-- <img src="../新疆景色网页/img/banner.jpg" alt="top图片"> --> <div id="main"> <div class="left"> <p>天气预报</p> <ul> <li>乌鲁木齐 呼和浩特 25-30</li> <li>乌鲁木齐 呼和浩特 25-30</li> <li>乌鲁木齐 呼和浩特 25-30</li> <li>乌鲁木齐 呼和浩特 25-30</li> </ul> <h5>今日推荐</h5> <img src="../新疆景色网页/img/tuijian1.jpg" alt="雪景天城"> <br> <a href="#">美景天城</a> <img src="../新疆景色网页/img/tuijian1.jpg" alt="雪景天城"> <br> <a href="#">美景天城</a> <img src="../新疆景色网页/img/tuijian1.jpg" alt="雪景天城"> <br> <a href="#">美景天城</a> </div> <div class="middle"> <img src="../新疆景色网页/img/ghost.jpg" alt="goist"> <img src="../新疆景色网页/img/picture_h1.gif" alt="美景寻踪"> <img class="fudong" src="../新疆景色网页/img/beauty1.jpg" alt="beauty1"> <img class="fudong" src="../新疆景色网页/img/beauty2.jpg" alt="beauty2"> <img class="fudong" src="../新疆景色网页/img/beauty3.jpg" alt="beauty3"> <img class="fudong" src="../新疆景色网页/img/beauty4.jpg" alt="beauty4"> <img src="../新疆景色网页/img/route_h1.gif" alt="route_h1"> <ul> <li>果子沟--赛里木湖--大草原--霍尔果思口岸</li> <li>果子沟--赛里木湖--大草原--霍尔果思口岸</li> <li>果子沟--赛里木湖--大草原--霍尔果思口岸</li> <li>果子沟--赛里木湖--大草原--霍尔果思口岸</li> </ul> </div> <div class="right"> <h5>新疆地图</h5> <img src="../新疆景色网页/img/map1.jpg" alt="map1"> <img src="../新疆景色网页/img/map2.jpg" alt="map2"> <h6>特色美食</h6> <ul> <li>大盘鸡</li> <li>大盘鸡</li> <li>大盘鸡</li> <li>大盘鸡</li> </ul> <h6>新疆住宿</h6> <ul> <li>南院住宿</li> <li>南院住宿</li> <li>南院住宿</li> <li>南院住宿</li> <li>南院住宿</li> <li>南院住宿</li> <li>南院住宿</li> </ul> <!-- <table border="1"> <tr> <td>大盘鸡</td> </tr> <tr> <td>大盘鸡</td> </tr> <tr> <td>大盘鸡</td> </tr> <tr> <td>大盘鸡</td> </tr> </table> --> </div> </div> <div id="buttom"> <p>网页爱好者©2019</p> <p>联系我们QQ:23234234</p> </div> </div> </body> </html>
xj.css 代码如下:
*{ margin: 0px; padding: 0px; } #con{ border:1px solid red; width:780px; height:880px; background-color: yellow; margin:auto; /*margin */ } #top{ width: 780px; height:225px; /* border: 1px solid black; */ /* background-color: red; */ } #top img{ /* 图片文字等行内标签默认与父类保持一致 */ display: block; } #top table{ /* border: 1px solid red; */ text-align: center; width:780px; background: url(../img/button1.jpg); } #top td:hover { background: url(../img/button1_bg.jpg); } #top table a{ text-decoration: none; } #main{ border: 1px solid green; background-color: green; width: 780px; height: 600px; } .left{ border:1px solid white; width: 195px; height:600px; background-color: #87CEFA; float:left; } .left p{ text-align: center; background: url(../img/weather.jpg) no-repeat; /* background-size: 195px 43px; */ line-height: 43px; /* 字是主题 图片是背景 背景的长宽要由字来决定 */ font-size: 15px; color: white; } .left ul{ text-align: center; list-style: none; font-size: 12px; line-height: 25px; color:white; } .left ul li{ background: skyblue url(../img/icon1.gif) no-repeat 15px; background: 颜色 背景图片 repeat x水平位置 y竖直位置 / 图片本身的长度 图片宽度; } /* span标签 行内标签 不能设置宽度 */ .left h5{ border:3px solid red; line-height: 30px; padding-left: 25px; /* padding-right:; */ /* background-size: 195px; */ background: #008B8B url(../img/icon2.gif) no-repeat 10px; } .left img{ margin-top:15px ; margin-left:15px; width:144px; height: 94px; } .left a{ padding-left:55px; /* margin:55px; */ /* 注意:标签的属性。 a标签是行内标签 不能设置宽高 */ } .middle{ border:1px solid red; width: 390px; height: 600px; background-color: white; /* 如果只有左侧浮动的话 它们将会镶嵌 这是右侧也需要向左侧浮动 */ float: left; } .middle img{ /* margin-top: 0px; padding:0px; */ display: block; } .fudong{ float:left; padding-left: 5px; padding-top: 5px; padding-bottom: 5px; } .middle ul{ margin-left: 35px; padding-top: 5px; font-size: 18px; } .right{ border:1px solid black; width: 188px; height: 600px; background-color: skyblue; float: left; } .right h5{ border:2px solid red; /* margin-top: 15px; */ padding-left: 25px; line-height: 30px; /* padding-right:; */ /* background-size: 195px; */ background: #008B8B url(../img/icon2.gif) no-repeat 10px; } .right h6{ border:2px solid red; margin-top: 5px; padding-left: 25px; line-height: 30px; /* padding-right:; */ /* background-size: 195px; */ background: #008B8B url(../img/icon2.gif) no-repeat 10px; } .right img{ padding-left: 15px; margin-top: 10px; } .right ul{ /* text-decoration: none; */ list-style: none; margin-top: 5px; /* 特备注意 通过内外边框来控制虚线的长度*/ margin-left: 20px; margin-right: 50px; /* margin-left:40px; */ /* text-align:left; */ /* margin-left:40px; margin-top: 20px; */ } .right li{ background: url(../img/icon2.gif) no-repeat 0px ; /*注意: 搞清楚内外边距 margin 外 padding 内*/ padding-left: 10px; border-bottom: 1px dashed white ; } /* .right table{ } */ #buttom{ border:1px solid black; background-color: skyblue; width:780px; height:50px; } #buttom p{ text-align: center; }
img文件夹中的图片如下:
运行结果如下:
要实现的效果图片:
代码如下:
<!DOCTYPE html> <html lang="zh-cn"> <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> <!-- 注意引用css文件的位置 --> <link rel="stylesheet" href="css/bk.css"> </head> <body> <div id="con"> <div class="con1"> <ul> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> </ul> <!-- <table > <tr> <td>菜单</td> <td>菜单</td> <td>菜单</td> <td>菜单</td> <td>菜单</td> </tr> </table> --> </div> <div class="con2"> <ul> <li>我的日记</li> <li>我的日记</li> <li>我的日记</li> </ul> </div> <div class="con3"> <h1>这是标题</h1> <p>这是内容这是内容这是内容这 是内容这是内容这是内容这是 内容这是内容这是内容这是内容 这是内容这是内容这是内容这是 内容这是内容这是内容这是内容这 是内容这是内容这是内容这是内容 这是内容这是内容这是内容这是内容 这是内容这是内容这是内容这是内 容这是内容这是内容这是内容这是 内容这是内容这是内容这是内容这 是内容这是内容这是内容这是内容</p> </div> </div> </body> </html>
bk.css代码如下:
#con{ border:1px solid black; background-color: white; width:1000px; height:1000px; margin:auto; } .con1{ /* border:1px solid red; */ width:1000px; height:30px; background-color: black; margin-top: 20px; /* list-style: none; border:1px; */ } .con1 ul{ /* border:2x solid yellow; */ background-color: white; width: 1000px; height: 30px; margin: 0px; padding:0px; } .con1 ul li{ border:1px solid black; width: 198px; line-height: 30px; list-style: none; text-align: center; /* color:white; */ display: inline-block; float: left; /* 设置浮动 */ } .con1 li:hover{ color:white; background-color: black; } /* .con1{ margin-top: 10px; border: 1px solid black; width:1000px; height: 32px; background-color:white; display: block; } table{ border:1px solid red; width: 1000px; height:32px; text-align:center; display: inline-block; } .con1 td{ width: 1000px; line-height: 32px; color:black; font-weight: bold; padding:0px; margin:0px; } .con1 td:hover{ background-color: black; color:white; } */ .con2{ border: 1px solid black; width: 200px; height: 200px; /* margin-left: 20px;*/ margin-top: 20px; float:left; } /* .con2{ text-align: center; line-height: 10px; } */ .con2 ul{ border:1px solid red; text-align: center; list-style: none; line-height: 30px; padding:0px; margin-left:20px; margin-right: 20px; } .con2 li{ border-bottom:1px dashed black; } .con3{ border: 1px solid black; background-color: white; width:776px; height:500px; /* float:left; */ display: inline-block; margin-top: 20px; margin-left: 20px; } h1{ text-align: center; } p{ color:black; text-indent: 2em; padding-left: 20px; padding:20px; }
运行结果如下:
要实现的效果图片:
代码如下:
<!DOCTYPE html> <html lang="zh-cn"> <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> <link rel="stylesheet" href="css/jnq.css"> </head> <body> <div id="con"> <div class="con1"><h1>HAPPY WALL</h1></div> <div class="con2"> <br>亲爱的丫头:<br><br>好好学习,天天向上! <br>开开心心,快快乐乐!<br>平平安安,健健康康! </div> <div class="con20"> <br>亲爱的丫头:<br><br>好好学习,天天向上! <br>开开心心,快快乐乐!<br>平平安安,健健康康! </div> <div class="con21"> <br>亲爱的丫头:<br><br>好好学习,天天向上! <br>开开心心,快快乐乐!<br>平平安安,健健康康! </div> <div class="con22"> <br>亲爱的丫头:<br><br>好好学习,天天向上! <br>开开心心,快快乐乐!<br>平平安安,健健康康! </div> <div class="con221"> <br>亲爱的丫头:<br><br>好好学习,天天向上! <br>开开心心,快快乐乐!<br>平平安安,健健康康! </div> <div class="con222"> <br>亲爱的丫头:<br><br>好好学习,天天向上! <br>开开心心,快快乐乐!<br>平平安安,健健康康! </div> <div class="con29"> <br>亲爱的丫头:<br><br>好好学习,天天向上! <br>开开心心,快快乐乐!<br>平平安安,健健康康! </div> <div class="con209"> <br>亲爱的丫头:<br><br>好好学习,天天向上! <br>开开心心,快快乐乐!<br>平平安安,健健康康! </div> <div class="con219"> <br>亲爱的丫头:<br><br>好好学习,天天向上! <br>开开心心,快快乐乐!<br>平平安安,健健康康! </div> <div class="con229"> <br>亲爱的丫头:<br><br>好好学习,天天向上! <br>开开心心,快快乐乐!<br>平平安安,健健康康! </div> <div class="con2219"> <br>亲爱的丫头:<br><br>好好学习,天天向上! <br>开开心心,快快乐乐!<br>平平安安,健健康康! </div> <div class="con2229"> <br>亲爱的丫头:<br><br>好好学习,天天向上! <br>开开心心,快快乐乐!<br>平平安安,健健康康! </div> <!-- <div class="con23"> <br>亲爱的丫头:<br><br>好好学习,天天向上! <br>开开心心,快快乐乐!<br>平平安安,健健康康! </div> <div class="con24"> <br>亲爱的丫头:<br><br>好好学习,天天向上! <br>开开心心,快快乐乐!<br>平平安安,健健康康! </div> <div class="con25"> <br>亲爱的丫头:<br><br>好好学习,天天向上! <br>开开心心,快快乐乐!<br>平平安安,健健康康! </div> --> <div class="con3"></div> </div> </body> </html>
jnq.css代码如下:
#con{ border:1px solid green; width:600px; height: 600px; margin:100px auto; background-image: linear-gradient(25deg,red,orange,yellow,green,cyan,blue,purple); /* 把父类设置成相对位置 他的子集以此为基准 */ position: relative; } .con1{ text-align: center; } .con2{ border:1px solid red; width:150px; height: 220px; background-color: rgb(60, 0, 255); /* 绝对定位 相对于父类偏移*/ position:absolute; top:80px; left:55px; /* 旋转 */ transform: rotate(70deg); } .con2:hover{ /* 浮标下的优先显示 index 指数 */ z-index: 9; /* 设置动画效果时间 all 表示所有方位 */ transition: all 1s; transform:rotate(0deg); } .con20{ border:1px solid red; width:150px; height: 220px; background-color: red; /* 绝对定位 相对于父类偏移*/ position:absolute; top:100px; left:45px; /* 旋转 */ transform: rotate(30deg); } .con20:hover{ /* 浮标下的优先显示 index 指数 */ z-index: 9; /* 设置动画效果时间 all 表示所有方位 */ transition: all 1s; transform:rotate(0deg); } .con21{ border:1px solid red; width:150px; height: 220px; background-color: yellow; position:absolute; top:150px; left:45px; /* 旋转 */ transform: rotate(10deg); } .con21:hover{ z-index: 9; transition: all 1s; transform:rotate(0deg); } .con22{ border:1px solid red; width:150px; height: 220px; background-color:white; /* 相对定位 */ position:absolute; top:200px; left:45px; /* 旋转 */ transform: rotate(-10deg); } .con22:hover{ z-index: 9; transition: all 1s; transform:rotate(0deg); } .con221{ border:1px solid red; width:150px; height: 220px; background-color:purple; /* 相对定位 */ position:absolute; top:250px; left:55px; /* 旋转 */ transform: rotate(-25deg); } .con221:hover{ z-index: 9; transition: all 1s; transform:rotate(0deg); } .con222{ border:1px solid red; width:150px; height: 220px; background-color:orange; /* 相对定位 */ position:absolute; top:300px; left:75px; /* 旋转 */ transform: rotate(-35deg); } .con222:hover{ z-index: 9; transition: all 1s; transform:rotate(0deg); } .con29{ border:1px solid red; width:150px; height: 220px; background-color: rgb(60, 0, 255); /* 绝对定位 相对于父类偏移*/ position:absolute; top:80px; left:300px; /* 旋转 */ transform: rotate(-70deg); } .con29:hover{ /* 浮标下的优先显示 index 指数 */ z-index: 9; /* 设置动画效果时间 all 表示所有方位 */ transition: all 1s; transform:rotate(0deg); } .con209{ border:1px solid red; width:150px; height: 220px; background-color: red; /* 绝对定位 相对于父类偏移*/ position:absolute; top:100px; left:280px; /* 旋转 */ transform: rotate(-30deg); } .con209:hover{ /* 浮标下的优先显示 index 指数 */ z-index: 9; /* 设置动画效果时间 all 表示所有方位 */ transition: all 1s; transform:rotate(0deg); } .con219{ border:1px solid red; width:150px; height: 220px; background-color: yellow; position:absolute; top:150px; left:300px; /* 旋转 */ transform: rotate(-5deg); } .con219:hover{ z-index: 9; transition: all 1s; transform:rotate(0deg); } .con229{ border:1px solid red; width:150px; height: 220px; background-color:white; /* 相对定位 */ position:absolute; top:200px; left:300px; /* 旋转 */ transform: rotate(10deg); } .con229:hover{ z-index: 9; transition: all 1s; transform:rotate(0deg); } .con2219{ border:1px solid red; width:150px; height: 220px; background-color:purple; /* 相对定位 */ position:absolute; top:250px; left:280px; /* 旋转 */ transform: rotate(25deg); } .con2219:hover{ z-index: 9; transition: all 1s; transform:rotate(0deg); } .con2229{ border:1px solid red; width:150px; height: 220px; background-color:orange; /* 相对定位 */ position:absolute; top:300px; left:260px; /* 旋转 */ transform: rotate(35deg); ![请添加图片描述](https://img-blog.csdnimg.cn/6f64b746e6504922a420d4cc1a87f9e4.gif) } .con2229:hover{ z-index: 9; transition: all 1s; transform:rotate(0deg); }
运行结果如下:
要实现的效果图片:
代码如下:
<!DOCTYPE html> <html lang="zh-cn"> <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> <link rel="stylesheet" href="css/xszc.css"> </head> <body> <form action="#"> <table border="1" align="center" > <caption>学生注册</caption> <tr> <td>姓名</td> <td><input type="text"/></td> </tr> <tr> <td>密码</td> <td><input type="password"/></td> </tr> <tr> <td>性别</td> <td> <input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女 </td> </tr> <td>性别</td> <td> <input type="checkbox" name="hobby" value="打球"/>打球 <input type="checkbox" name="hobby" value="唱歌"/>唱歌 <input type="checkbox" name="hobby" value="打游戏"/>打游戏 </td> <tr> <tr> <td>省份</td> <td><select name="shengfen" id=""><option value="henan">河南</option> <option value="hebei">河北</option> <option value="shandong">山东</option> </select></td> </tr> <tr> <td> 自我介绍 </td> <td><textarea name="ziwojieshao" id="" cols="10" rows="5"></textarea></td> </tr> <tr> <td> 照片 </td> <td><input type="file"></td> </tr> <tr> <td> </td> <td><button>普通按钮</button> <button type="submit">提交</button> <button type="reset">重置</button> </td> </tr> </table> </form> </body> </html>
xszc.css代码如下:
table{
width:400px;
}
运行结果如下:
要实现的效果图片:
代码如下:
<!DOCTYPE html> <html lang="zh-cn"> <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> <link rel="stylesheet" href="css/spglht.css" type="text/css"> </head> <body> <div id="con"> <div id="top"> <p>商品管理后台</p> <span>欢迎张三(采购经理)|注销</span> </div> <div id="left"> <ul class="menu"> <li>商品管理 <ul> <li><a href="page1.html" target="mywin">看帅哥1</a></li> <li><a href="page2.html" target="mywin">看帅哥2</a></li> </ul> </li> <li>人事管理1 <ul> <li><a href="#" target="mywin">商品查询</a></li> <li><a href="#" target="mywin" >商品添加</a></li> </ul> </li> <li>人事管理2 <ul> <li><a href="#" target="mywin">商品查询</a></li> <li><a href="#" target="mywin">商品添加</a></li> </ul> </li> <li>采购管理 <ul> <li><a href="#" target="mywin">商品查询</a></li> <li><a href="#" target="mywin">商品添加</a></li> </ul> </li> </ul> </div> <div id="right"> <iframe name="mywin" src=""></iframe> </div> <div id="zero"></div> <div id="buttom"></div> </div> </body> </html>
page1.html代码如下:
<!DOCTYPE html>
<html lang="zh-cn">
<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>page1</title>
<link rel="stylesheet" href="css/page1.css">
</head>
<body>
<div id="con"></div>
</body>
</html>
page2.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>Document</title>
<title>page2</title>
<link rel="stylesheet" href="css/page2.css">
</head>
<body>
<div id="con"></div>
</body>
</html>
spglht.css代码如下:
#con{ width:1800px; height:900px; border:5px solid green; background-color: yellow; } #top{ border:1px solid black; width: auto; height:100px; background-color: black; } p{ text-align: left; color:white; text-decoration: none; font-size: 30px; margin-left:40px; display: inline-block; } span{ /* text-align:right; */ /*margin-left: 800px; 注意 */ color:white; /* display: inline-block; */ float: right; margin-right: 20px; line-height:100px ; } #left{ border:1px solid red; height:800px; width:160px; background-color: black; /*区分清display 改变标签类别 float浮动 */ display: block; float:left; } ul{ list-style: none; margin: 0px; padding: 0px; text-align: center; color:white; /* border:1px solid black; */ } .menu{ font-weight: bolder; line-height: 40px; font-size: 25px; /* border:1px solid gray; */ } .menu li ul{ height:0px; overflow: hidden; background-color: gray; } .menu li:hover ul{ height:80px; } #right{ /* margin-left: 300px; */ margin-top: 0px; width:1634px; height:800px; border:1px solid green; background-color: white; display: inline; float:left; } iframe{ width: 1200px; height:700px; border:1px solid green; margin-left:200px; margin-top: 50px; float:left; } #zero{ clear: both; }
page1.css代码如下:
#con{
border:1px solid brown;
width:auto;
height:800px;
background:url(../img/shuaige.jpg) ;
}
page2.css代码如下:
#con{
border:1px solid brown;
width:auto;
height:800px;
background:url(../img/shuaige2.png) ;
}
img文件夹中的图片如下:
运行结果如下:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。