__x__(31)0908第五天__导航条的练习 <ul> 版本
效果图：
html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>湖南城市学院</title> <link rel="stylesheet" type="text/css" href="css/hncu.css" />
</head> <body>
<div id="hncu_header"> </div> <ul id="hncu_nav">
<li>
<a href="#">首页</a>
</li> <li>
<a href="#">新闻</a>
</li> <li>
<a href="#">联系</a>
</li> <li>
<a href="#">关于</a>
</li>
</ul> <div id="hncu_content">
<div id="hncu_left"></div>
<div id="hncu_center"></div>
<div id="hncu_right"></div>
</div> <div id="hncu_footer"> </div>
</body>
</html>
css代码：
@charset "utf-8";
*{
margin: 0px;
padding: 0px;
}
body{
background-color: #bfc;
}
#hncu_header{
width: 1000px;
height: 200px;
background-color: skyblue;
margin:10px auto 10px;
}
#hncu_nav{
width: 1000px;
height: 70px;
background-color: blue;
list-style:none;
margin:0px auto 10px;
overflow:hidden;
zoom:;
}
#hncu_nav li{
width: 25%;
height: 70px;
float: left;
}
#hncu_nav a{
width: 100%;
height: 70px;
color: white;
line-height: 70px;
text-align: center;
text-decoration: none;
float: left;
}
#hncu_nav a:link{
background-color: blue;
}
#hncu_nav a:visited{
background-color: blue;
}
#hncu_nav a:hover{
background-color: red;
}
#hncu_nav a:active{
color: blue;
}
#hncu_content{
width: 1000px;
height: 600px;
background-color: yellow;
margin:0px auto 10px;
}
#hncu_left{
width: 200px;
height: 500px;
background-color: green;
margin-top:50px;
float:left;
}
#hncu_center{
width: 580px;
height: 500px;
background-color: #bfc;
margin-top:50px;
margin-right: 10px;
margin-left: 10px;
float:left;
}
#hncu_right{
width: 200px;
height: 500px;
background-color: pink;
margin-top:50px;
float:left;
}
#hncu_footer{
width:1000px;
height:200px;
background-color:skyblue;
margin:0px auto 10px;
}
__x__(31)0908第五天__导航条的练习 <ul> 版本的更多相关文章
- __x__(30)0908第五天__导航条的练习 <div>版本
效果图: html源代码: <!doctype html> <html> <head> <meta charset="utf-8" /& ...
- __x__(29)0908第五天__高度塌陷 问题
高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的. 但是当为 子元素 设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷...以致于布局混乱 变成 BFC块级格式 ...
- __x__(34)0908第五天__ 定位 position
position 定位 指将原始摆放到页面的任意位置. 继承性:no 默认值:static 没有定位,原始出现在正常的文档流中 可选值: static : 默认值,元素没有开启定位 ...
- __x__(35)0908第五天__ 层级 z-index
如果三个 div 全部设置 position: absolute; 绝对定位,且未设置 z-index, 则从代码结构上 下面的元素 会盖住 上面的元素. z-index 层级: 通过 z-i ...
- __x__(36)0908第五天__背景 background
1. 背景 background: red url(img/cat.gif) repeat-x fixed; 2. 背景颜色 background-color: red; 3. 背景图片 backgr ...
- 为什么要使用ul li布局网站导航条？使用ul li布局网站网页导航必要性
会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图. ...
- __x__(32)0908第五天__Photoshop的基本操作
1. 设置 Photoshop 的单位为 像素px 2. 标尺 显示与隐藏 Ctrl + r 3. 放大与缩小 Ctrl + 1 放大到100% Ctrl + 0 适应屏幕 Alt + ...
- __x__(35)0908第五天__opacity 透明度
opacity 透明度 设置一个 0 - 1 之间的值. opacity: 0; 完全透明 opacity: 0.5 半透明 opacity: 1; 完全不透明 缺点: IE8及以 ...
- __x__(37)0909第五天__背景图按钮
link,hover,active三种按键状态,存放三张图片 缺点: 资源只有在被使用时,才会被加载. 页面第一次加载时,会出现短暂的延迟闪烁,造成一次不佳的用户体验. 图片整合技术 CSS-Spri ...
随机推荐
- Entity Framework入门教程（10)---离线场景保存和删除实体/实体图集
离线场景保存和删除实体/实体图集 这一节的内容是在离线场景中保存实体和实体图集 在离线场景中,当我们保存一个离线的实体图集或一个单独的离线实体时,我们需要做两件事.首先,我们要把实体附加到新的上下文中 ...
- Kafka实战分析（一）- 设计、部署规划及其调优
1. Kafka概要设计 kafka在设计之初就需要考虑以下4个方面的问题: 吞吐量/延时 消息持久化 负载均衡和故障转移 伸缩性 1.1 吞吐量/延时 对于任何一个消息引擎而言,吞吐量都是至关重要的 ...
- 点评cat系列-应用集成
========================消息的基本属性========================消息的几个属性:type: 定义消息的 category, 比如 SQL 或 RPC 或 ...
- JAVA进阶7
间歇性混吃等死,持续性踌躇满志系列-------------第7天 1.Map接口的常用方法 import java.util.HashMap; import java.util.Map; publi ...
- Go 环境配置
1.下载SDK 官网:https://golang.google.cn/ go中文在线文档:https://studygolang.com/pkgdoc 2.配置环境变量 windows使用.msi一 ...
- win10免安装版本的MySQL的下载安装和配置
下载mysql-xxx.zip(免安装版) 解压到自己想要的目录下(我的是D:\mysql\),打开mysql-5.7.21-winx64文件夹,新建my.ini文件,输入: [mysql] # 设置 ...
- 《css网站布局实录》（李超）——读书札记
1.web表现层技术 2.HTML链接设计思想 3.对信息进行合理的分析.分类与处理来创造商业价值. 4.头部描述浏览器所需信息,主体包含所需要展现的具体内容. 5.HTML(XHTML)XML 6. ...
- 两个同级div重叠的情况
一个div使用了position,自身脱离了文本流,另一个顶上去.
- Spring系列(一) Spring的核心
Spring 简介 Spring 是一个开源轻量级企业应用架构,目的是为了简化企业级应用开发.(1)Spring 框架可以帮我们管理对象的生命周期,帮助我们管理对象间的依赖关系,相互协作:(2)Spr ...
- PHP 【二】
EOF EOF(heredoc)是一种在命令行shell(如sh.csh.ksh.bash.PowerShell和zsh)和程序语言(像Perl.PHP.Python和Ruby)里定义一个字符串的方法 ...