信息导航与网站设计采用HTML+CSS+DIV布局页面

期末作业：根据本课程所学内容布局如下页面

要求：导航条的内容要链接到自己的作品页面(从7次作业中选6个)，页面中间的DIV要按照图示要求并根据自己的情况填写上相应的内容，可以使用列表也可以使用段落，下面的版权信息也要根据自己的信息填写上。（提示：id选择器、类选择器、伪类选择器等都可以用到）

1.拿到图片及资料之后先建好文件夹，把图片放到images文件夹下；自己的作品放到work下。

2.先观察一下页面，进行简单分割

3.在编译器里打开自己建好的文件夹开始代码部分。

在index.html中

注：这里我给body设置了一个定宽 1190，个人习惯可以不设置；

代码中用到的需要清除样式!

①header

html部分

css部分

注：宽度不设置继承body的宽度，高度不继承。

②nav

html部分

此处做演示用我只加3个作品，后面的a标签起一个对比的作用。

注：a标签的href属性中的“#”与“javascript;;”的区别

其中javascript: 是一个伪协议。它可以让我们通过一个链接来调用javascript函数。但是由于这个函数为空，所以我们调用的就是一个空函数，并不会发生任何实质性的改变。同时可以实现a标签的点击运行。如果当页面里面的内容很多的时候，有了上下滚动条，使用href=“#"会发生跳转到页面顶部的问题。而使用href="javascript:;" 就可以避免页面的乱跳！

css部分

注：li 用到了float，他的父元素ul需设置 overflow:hidden 清除浮动

③content

html部分

css部分

④footer

html部分

css部分

4.成品图

附上index.html完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>信息导航与网站设计</title>
</head>
<body><div class="body"><div class="header"><img src="./images/true.jpg" width="100%"></div><div class="nav"><ul><li><a href="./work/work1.html">我的作品1</a>    </li><li><a href="./work/work2.html">我的作品2</a> </li><li><a href="./work/work3.html">我的作品3</a> </li><li><a href="#">我的作品4</a> </li><li><a href="javascript:;">我的作品5</a> </li><li><a href="javascript:;">我的作品6</a> </li></ul>               </div><div class="content"><ul><li><p>学号：</p><P>专业：</P><p>姓名：</p></li><li><p>人生格言：</p><p>兴趣爱好：</p><p>自我介绍：</p></li><li><img src="./images/anyang.png" width="100%"><p style="text-indent:2em">安阳，地处殷、邺，位于河南省最北部，地处河南、河北、山西三省交界，西倚太行山，东连华北平原，北邻邯郸，西接鹤壁、新乡......</p></li></ul></div><div class="footer"><p>Copyright © 2014-2018 Z版权所有</p><p>郑州航空工业管理学院  XX级XX专业</p></div></div>
</body>
</html>
<style>.body{margin: 0 auto;width: 1190px;}ul{overflow: hidden;list-style:none;padding: 0;}a{text-decoration: none;color: #fff;}.header{height: 280px;}.nav{margin:10px auto;padding: 0 200px;height: 43px;border-radius: 5px;background: url(./images/centerbg.gif); }.nav ul li{float: left;width: 120px;line-height: 43px;background: url(./images/fgbg.gif) no-repeat right; }.nav ul li a{float: left;width: 120px;line-height: 43px;text-align: center;}.nav ul li a:hover{color: #999;background: url(./images/hoverbg.gif); }.nav ul li:last-child{background: none;}.content{height: 500px;}.content ul li{float: left;width: 390px;height: 500px;margin-right:10px;background-color: #ccc;}.content ul li:last-child{margin-right:0;}.content p{font-size: 14px;font-family: "Microsoft YaHei";}.footer{margin:10px auto;height: 50px;background-color: skyblue;}.footer p{font-size: 12px;font-family: "Microsoft YaHei";text-align: center;}</style>

注：文章是为小伙伴完成作业写的，如有疑问或发现错误请及时私信作者。希望大家一起学习共同进步！

信息导航与网站设计采用HTML+CSS+DIV布局页面相关推荐

收藏网站制作常用经典css.div.布局.设计实例打包下载
点击下载:8好玩的导航菜单.动态感比较强lavalamp_0[1].1.0.rar 点击下载:box盒子-.rar 点击下载:cctv-鼠标滑过图片渐变效果.rar 点击下载:css-menu导航.r ...
收藏网站制作常用经典css.div.布局.设计实例打包下载(下方有其他链接)
http://www.aa25.cn/234.shtml 转载于:https://www.cnblogs.com/asia/archive/2009/05/20/1467772.html
27款经典网站设计必备的CSS框架
1. BlueTrip (网址:http://bluetrip.org/) BlueTrip 是一个集成了BluePrint & Tripoli 框架的做好的部分;Hartija 的打印样式; ...
HTML5期末大作业：文采网站设计——个人书画作品展示(6个页面) HTML+CSS+JavaScript...
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能满足你的需求 ...
HTML5期末大作业：在线电影网站设计——电影速递网(12页面)含登录注册HTML+CSS+JavaScript
HTML5期末大作业:在线电影网站设计--电影速递网(12页面)含登录注册HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业 ...
MVC 音乐商店第 10 部分：导航和网站设计、结论的最后更新
MVC 音乐商店是介绍,并分步说明了如何使用 ASP.NET MVC 和 Visual Studio 为 web 开发教程应用程序. MVC 音乐商店是一个轻量级的示例存储实现它卖音乐专辑在线,并实现 ...
web前端大三实训网页设计：餐饮网站设计——烧烤美食山庄(7个页面) HTML+CSS+JavaScript
web前端大三实训网页设计:餐饮网站设计--烧烤美食山庄(7个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
html网络花店设计图片,花店网站设计，html+CSS+JS
[实例简介] 花店网站设计,html+CSS+JS,包括各种链接,三级菜单,网页视频,背景音乐等 [实例截图] [核心代码] flower └── flower ├── ceshi.html ├── ...
dreamweaver cs5 css教程,网页设计与制作——Dreamweaver CS5标准教程第12章 CSS+Div布局.pptx...
第12章 CSS+Div布局;1. 盒子模型2. 布局技术3. "上中下"布局4. "左中右"布局;12.1.1盒子结构网页中元素都占据一定的空间,除了元素内容 ...

信息导航与网站设计采用HTML+CSS+DIV布局页面

信息导航与网站设计采用HTML+CSS+DIV布局页面相关推荐

最新文章

热门文章

信息导航与网站设计 采用HTML+CSS+DIV布局页面

信息导航与网站设计 采用HTML+CSS+DIV布局页面相关推荐

最新文章

热门文章

信息导航与网站设计采用HTML+CSS+DIV布局页面

信息导航与网站设计采用HTML+CSS+DIV布局页面相关推荐