静态网页制作作业_HTML CSS复习之制作静态网页

这一周我先是复习了一些基础的布局，下面是比较常用的几种基本布局：

左边aside部分左浮动，右边content部分也左浮动，两个部分无空隙

左边aside部分左浮动，右边content部分右浮动

然后这周也自己还利用CSS中3D变换的效果做了一个翻转图（鼠标移动到图片上，就会翻转到背面）

三张图正面的效果

鼠标移动到第一张图翻转到背面的效果，其余两张图也是一样

自己试着做了一个个人博客的静态页面，由于时间关系还有很多需要完善：

最后是跟着课程做了一个COFFEE MENU：

效果图差不多是这样

html部分的代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="coffee.css">
</head>
<body><div id="container"><div id="header"><p><img src="../images/banner.jpg" alt=""></p> <div id="icon-list"><img src="../images/1.bmp" alt=""><img src="../images/2.bmp" alt=""><img src="../images/3.bmp" alt=""><img src="../images/4.bmp" alt=""></div></div><div id="nav"><a href="#">咖啡MENU</a><a href="#">咖啡MENU</a><a href="#">咖啡MENU</a><a href="#">咖啡MENU</a><a href="#">咖啡MENU</a></div><div id="main"><div id="aside"><h2>COFFEE MENU</h2><table><tr><th ></th><th >拿铁<br />Latte</th><th >卡布奇诺<br />Cappuccino</th><th >摩卡<br />Mocha</th><th >浓缩咖啡<br />Espresso</th></tr><tr><th scope="row"  >大杯</th><td>35</td><td>35</td><td>35</td><td>30</td></tr><tr><th scope="row"  >中杯</th><td>30</td><td>30</td><td>30</td><td >25</td></tr><tr><th scope="row"  >小杯</th><td>25</td><td>25</td><td>25</td><td>20</td></tr></table><div id="imglist"><div class="pol rotate-left"><img src="../images/Mocha.jpg" alt=""></div><div class="pol rotate-right"><img src="../images/Latte.jpg" alt=""></div><div class="pol rotate-left"><img src="../images/Espresso.jpg" alt=""></div><div class="pol rotate-right"><img src="../images/Cappuccino.jpg" alt=""></div></div> </div><div id="content"><div class="subcon"><!--.subcon*4>img+.subtext>h2+p--> <div class="subcon"><img src="../images/Mocha.jpg" alt=""><div class="subtext"><h2>Mocha</h2><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet asperiores expedita delectus nobis ipsa fugit officia odit inventore repudiandae! Excepturi, consectetur? Sunt aliquam ut modi provident, vero praesentium. Blanditiis, a?</p></div></div><div class="subcon"><img src="../images/Latte.jpg" alt=""><div class="subtext"><h2>Latte</h2><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet asperiores expedita delectus nobis ipsa fugit officia odit inventore repudiandae! Excepturi, consectetur? Sunt aliquam ut modi provident, vero praesentium. Blanditiis, a?</p></div></div><div class="subcon"><img src="../images/Espresso.jpg" alt=""><div class="subtext"><h2>Espresso</h2><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet asperiores expedita delectus nobis ipsa fugit officia odit inventore repudiandae! Excepturi, consectetur? Sunt aliquam ut modi provident, vero praesentium. Blanditiis, a?</p></div></div><div class="subcon"><img src="../images/Cappuccino.jpg" alt=""><div class="subtext"><h2>Cappuccino</h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat eveniet ex sequi, quae ipsum magni facilis. Debitis obcaecati enim aliquid quidem? Officiis, esse. Eligendi debitis odit dolorum dolore similique ratione?Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet asperiores expedita delectus nobis ipsa fugit officia odit inventore repudiandae! Excepturi, consectetur? Sunt aliquam ut modi provident, vero praesentium. Blanditiis, a?</p></div></div></div></div></div><div id="footer"><p>coffee menu</p></div></div>    <div id="l-fix"><img src="../images/Latte.jpg" alt=""></div>
</body>
</html>

CSS部分的代码：

*{margin:0;padding:0;
}
body{font-size: 16px;color: #673929;}
#container{margin: 0 auto;width: 900px;position: relative;
}
#icon-list{position: absolute;top: 170px ;right: 30px;width: 130px;height: 30px;font-size: 0;
}
#header{height: 220px;margin-bottom: 5px;}
#nav{height: 30px;margin:5px;background-color: #09c;font: 18px;line-height: 30px;/*行高*/color:#fff;letter-spacing: 2px;text-align: center;width: auto;}
#nav a{text-decoration: none;
}
a:link{color:#fff;/*text-decoration: none;*/
}
a:visited{color: #fff;/* text-decoration: none;*/
}
a:hover{color:yellow;/*  text-decoration: none;*/}
a:active{color: yellow;
}
#main{background-color: #000;/* height:2050px;*/
}
#aside{float:left;width: 300px;background-color: #6cf;text-align: center ;font-size: 14px;
}
#aside h2{margin: 20px;
}
#imglist{width: 130px;margin: 0 auto;
}
.pol{width: 85px;padding: 10px;background-color: #eee;border: 1px solid #bfbfbf;box-shadow: 2px 2px 4px #aaa;border-radius: 5px;
}
#imglist img{height: 95px;width: 85px;margin: 0 auto;;
}
.rotate-left{-ms-transform: rotate(7deg);-o-transform: rotate(7deg);-webkit-transform: rotate(7deg);transform: rotate(7deg);
}
.rotate-right{-ms-transform: rotate(-7deg);-o-transform:rotate(-7deg);-webkit-transform:rotate(-7deg);transform:rotate(-7deg);
}table{color: #000;
}#content{float:right;width:595px;/* height:2050px;*/margin-bottom: 5px;background-color: #cff;}
.subcon{width: 570px;margin: 10px auto;clear: both;
}
.subcon img{margin:5px;padding: 5px;float: left;border: 1px dasher #000;
}
.subcon .subtext{width: 60%;float: left;margin: 5px;
}
.subcon h2{margin: 5px;
}
.subcon p{font:16px/2em;
}#footer{height: 60px;line-height:60px;background-color: #6cf;clear:both;text-align: center;
}
#l-fix{position: fixed;top:100px;left:15px;
}

也会有不完善的地方可以指出来讨论呀，加油！

静态网页制作作业_HTML CSS复习之制作静态网页相关推荐

HTML网页设计期末课程大作业：汽车网页——宝马轿车 6页带背景音乐学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载
HTML网页设计期末课程大作业 :汽车网页--宝马轿车 6页带背景音乐学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载临近期末, 你还在为HTML网页设计结课作 ...
HTML奥运网页5页面文化 ~ 体育学生网页设计作业 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计
HTML奥运网页5页面文化 ~ 体育学生网页设计作业 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计临近期末, 你还在为HTML网页设计结 ...
html网页设计期末大作业_HTML+CSS+JS网页设计期末课程大作业——橙色的素材火资源整站(25页)
html网页设计期末大作业_HTML+CSS+JS网页设计期末课程大作业--橙色的素材火资源整站(25页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...
HTML网页设计期末课程大作业：汽车网页——宝马轿车 6页带背景音乐学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载...
HTML网页设计期末课程大作业 :汽车网页--宝马轿车 6页带背景音乐学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载临近期末, 你还在为HTML网页设计结课作 ...
HTML5期末大作业：动漫网站设计——动漫樱桃小丸子(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品关于动漫的HTML网页设计
HTML5期末大作业:动漫网站设计--动漫樱桃小丸子(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品关于动漫的HTML网页设计常见网页设计作业题材有个人. 美食. 公司 ...
B11HTML5期末大作业：动漫网站设计——动漫樱桃小丸子(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品关于动漫的HTML网页设计
HTML5期末大作业:动漫网站设计--动漫樱桃小丸子(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品关于动漫的HTML网页设计常见网页设计作业题材有个人. 美食. 公司 ...
网页设计作业,网页制作作业HTML5+CSS大作业——汽车专题网页设计(1页) dreamweaver作业静态HTML网页设计模板
HTML5+CSS大作业--汽车专题网页设计(1页) dreamweaver作业静态HTML网页设计模板常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. ...
web前端期末大作业 HTML+CSS+JavaScript web课程设计网页规划与设计企业网站制作
HTML5期末大作业:家具网站设计--家具装饰网页模板 (17页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计 ...
垃圾分类网页制作垃圾分类网页设计作业 HTML CSS垃圾分类网页模板大学生垃圾分类网站毕业设计 DW垃圾分类网页模板下载垃圾分类网页成品代码环保网页作品下载
大学生垃圾分类网页制作设计思路知识点应用内容说明代码演示页面效果首页二级页面-图文混排二级页面-图片列表三级图片详情留言表单页面成品下载设计思路垃圾分类网页设计作品采用DIV ...

静态网页制作作业_HTML CSS复习之制作静态网页

静态网页制作作业_HTML CSS复习之制作静态网页相关推荐

最新文章

热门文章