1.用CSS设计网站导航
横向导航
body{background-color:#000000;}
#nav{height:26px;border-bottom:2px solid #ffffff;list-style:none;}
#nav li{float:left;font-size:14px;font-weight:bold;}
#nav li
a{color:#FFFFFF;text-decoration:none;padding-top:7px;display:block;width:97px;height:19px;text-align:center;background-image:
url(img/normal.gif);margin-left:2px;}
#nav li a:hover{background-image:url(img/hover.gif);color:#ffffff;}
#nav li a#current{background-image:url(img/active.gif);color:#000000;}
<ul id="nav">
<li><a href="#" id="current">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">参考</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">联系</a></li>
</ul>
纵向导航
#category{width:100px;border-color:#c5c4c6;border-style:solid;border-width:0px 1px 1px 1px;}
#category h1,#category h2{margin:0px;padding:4px;font-size:12px;}
#category h1{border-top:1px solid #c5c6c4;background-color:#f4f4f4;}
#category h2{font-weight:normal;}
<div id="category">
<h1>CSS</h1>
<h2>A</h2>
<h2>B</h2>
<h1>WEB</h1>
<h2>A</h2>
<h2>B</h2>
</div>
下拉及多级弹出式菜单
<style type="text/css" rel="stylesheet">
ul {margin:0;padding:0;list-style:none;width:130px;border-bottom:1px solid #ccc;font-size:12px;}
ul li {position:relative;}
li ul {position:absolute;left:129px;top:0;display:none;}
ul li a {display:block;text-decoration:none;color:#777;background:#fff;padding:5px;border:1px solid
#ccc;border-bottom:0;}
* html ul li {float:left;height:1%;}
* html ul li a {height:1%;}
li:hover ul,li.over ul {display:block;}
</style >
<script language="javascript">
startList = function(){
if(document.all && document.getElementById){
navRoot = document.getElementById("nav");
for(i=0;i<navRoot.childNodes.length;i++){
node=navRoot.childNodes[i];
if(node.nodeName=="LI"){
node.onmouseover=function(){this.className += " over";}
}
node.onmouseout=function(){this.className=this.className.replace("
over","");}
}
}
}
window.onload = startList;
</script>
<body>
<ul id="nav">
<li><a href="">文章</a>
<ul>
<li><a href="">Java</a></li>
<li><a href="">Domion</a></li>
<li><a href="">C++</a></li>
</ul>
</li>
<li><a href="">Blog</a>
<ul>
<li><a href="">全部</a></li>
<li><a href="">网页</a></li>
<li><a href="">Domion技术</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="">Music</a></li>
<li><a href="">纯音乐</a></li>
</ul>
</bodY>
2.背景控制
背景颜色、背景图片、背景定位、背景滚动
背景属性缩写:
background:背景色 背景图片 背景平铺模式 背景滚动模式 背景定位
3.使用列表元素
ul无序列表- 列表中的各个元素现在逻辑上没有先后顺序
ol有序列表-将列表中的各个元素有序的 编号
常用属性:
list-style : 设置列表的所有属性选项
list-style-image:设置图片作为列表中的项目符号
list-style-position:设置项目符号的放置位置
list-style-type:设置项目符号的几种默认样式
1.使列表变为段落:display:inline
2.列表缩进排版:text-indent:value;
4.字体及段落样式设计
CSS支持的字体样式包含字体、字号、颜色等基本属性，以及对其他字体的微调控制方式
5.图片样式设计
图片定位：
一种使用margin进行外边距控制；
另一种通过top及right属性进行图片位置的相对定位。
图片剪切
1.使用clip剪切：clip:rect(number1 number2 number3 number4);
2.使用div强制剪切:
overflow:hidden; 将强制不显示对象中超过对象范围的部分内容
div{width:280px;height:290px;overflow:hidden;}
6.链接样式控制
a:link、a:visited、a:active、a:hover
分享到：
相关推荐
第4章 CSS网站元素设计 4.1 用CSS设计网站导航 4.1.1 横向导航 4.1.2 纵向导航 4.1.3 下拉及多级弹出式菜单 4.1.4 门户网站的导航设计(闪客帝国) 4.2 背景控制 4.2.1 背景颜色 4.2.2 背景图片 4.2.3 背景定位 4.2.4 ...
形考任务五 使用 <div> 元素以及CSS样式表对下面的内容进行的布局设计。
第1章 设计模式：轻松搞定CSS！ 第2章 HTML设计模式 第3章 CSS选择符与继承 第4章 盒模型 第5章 盒模型的尺寸 第6章 盒模型的属性 第7章 定位模型 第8章 定位：缩进、偏移与对齐 第9章 定位：进阶 第10章 为文本赋予...
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 ...元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
在本书中对设计中常用的网页元素和布局方式都给出详细的分类和归纳，并讲解了完整的解决方法，主要包括各种导航菜单(水平的、竖直的、固定宽度的、自适应宽度的、下拉的等)，Tab面板、伸缩面板和折迭面板，以及各种...
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 ...元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
中软国际网站布局与开发技巧，适合于css初学者 第一章：web标准与css布局 第二章：xhtml与css基础 第三章：css网页布局 第四章：css网站元素设计
1.2.1 CSS标准简介 1.2.2 在HTML中引入CSS的方法 1.3 基本CSS选择器 1.3.1 标记选择器 1.3.2 类别选择器 1.3.3 ID选择器 1.4 复合选择器 1.4.1 “交集”选择器 1.4.2 ...
《css设计指南(第3版)》是一本面向初中级读者的经典设计指南。全书共分8 章，前4 章分别介绍了html 标记和文档结构、css 工作原理、定位元素、字体和文本，对规则、声明、层叠、特指度、选择符等基本概念进行了详细...
4、对于页面上各个元素，使用CSS进行外观设计，根据主题选取适当的字体大小、颜色和元素背景等。 5、要求使用外部CSS文件。 6、布局方面，使用DIV+CSS布局。 7、对于设计完成的网页样式，要求具有较高的灵活性、可...
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 ...元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
2.1 “CSS禅意花园”简介 2.2 郊野——两列布局 2.3 像素画——三列布局 2.4 百合池塘——三列布局变体 2.5 郁金香——多列布局 2.6 日与夜——包含圆角的设计 2.7 Si6——包含倾斜的设计 2.8 清茶...
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 ...元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
菜单美观、醒目，二级菜单可正常弹出与跳转。 要有JS特效，如定时切换和手动切换图片轮播。 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。 页面清爽、美观、大方，不雷同。 不仅要能够把用户要求的内容...
第1章 设计模式：轻松搞定CSS！ 第2章 HTML设计模式 第3章 CSS选择符与继承 第4章 盒模型 第5章 盒模型的尺寸 第6章 盒模型的属性 第7章 定位模型 第8章 定位：缩进、偏移与对齐 第9章 定位：进阶 第10章 为文本赋予...
IE 6/UE 7/ Firefox讲解各类网页布局方法：固定宽度布局、变宽布局制作流行的网页元素：导航、菜单、圆角、面板为学习者提供：CSS常用单词英汉对照表内容丰富的配套网站。 《CSS设计彻底研究》是一本深入研究和揭示...
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 ...元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 ...元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 ...元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog