发布时间:2019-12-30    所属分类:网站建设   浏览:1636

网站DIV+CSS教程培训教程X(HTMLCSS基础知识)二


纵向导航菜单及二级弹出菜单


image.png


■纵向列表

■标签的默认样式

■css派生选择器

■css选择器的分组

■纵向二级列表

■相对定位和绝对定位



一、纵向列表

<div id="menu">

 <ul>

 <li>首页</li>

 <li>网页版式布局</li>

 <li>div+css教程</li>

 <li>div+css实例</li>

 <li>常用代码</li>

 <li>站长杂谈</li>

 <li>技术文档</li>

 <li>资源下载</li>

 <li>图片素材</li>

 </ul>

 </div>


image.png


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

body { font-family: Verdana; font-size: 12px; line-height: 1.5; }

a { color: #000; text-decoration: none; }

a:hover { color: #F00; }

#menu { width: 100px; border: 1px solid #CCC; }

#menu ul { list-style: none; margin: 0px; padding: 0px; }

#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; }

</style>

</head>

<body>

<div id="menu">

<ul>

<li><a href="@#">首页</a></li>

<li><a href="">网页版式布局</a></li>

<li><a href="">div+css教程</a></li>

<li><a href="">div+css实例</a></li>

<li><a href="">常用代码</a></li>

<li><a href="">站长杂谈</a></li>

<li><a href="">技术文档</a></li>

<li><a href="">资源下载</a></li>

<li><a href="">图片素材</a></li>

</ul>

</div>

</body>

</html>


image.png


二、标签的默认样式


body默认外边距,另外本例中ul前的圆点及左侧的内边距,另h1-h6字体大小各不相同,em默认为斜体,strong表示粗体。正因为有这些默认样式,一个设计合理的页面,即使没有加载样式,也能让用户很容易阅读


body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }

 ul { list-style: none; }

 img { border-style: none; }


三、css派生选择器


#menu ul { list-style: none; margin: 0px; padding: 0px; }

 #menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; }

#menu ul和#menu ul li即为派生选择器


四、css选择器的分组


可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的,p段落、div分区、span都是20像素字体。

h1,h2,h3,h4,h5,h6 { color: green; } 

p,div,span{ font-size:20px; }


五、纵向二级列表


网站DIV+CSS教程培训教程X(HTMLCSS基础知识)二  html教程 divcss 第3张

六、相对定位和绝对定位


■定位标签:position

■包含属性:relative(相对) absolute(绝对)

 

1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上。然后通过设置垂直或水平位置,让这个元素"相对于"它的原始起点进行移动。(再一点,相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其他框)

 

2.position:absolute; 表示绝对定位,位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流,因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。(因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高,它显示的越在上层。)

 

3.父容器使用相对定位,子元素使用绝对定位后,这样子元素的位置不再相对于浏览器左上角,而是相对于父容器左上角

 

4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置,这四个属性只有在该元素使用定位后才生效,其它情况下无效。另外这四个属性同时只能使用相邻的两个,不能即使用上又使用下,或即使用左,又使用右


超链接伪类


■链接的四种样式

■将链接转换为块状

■用css制作按钮

■首字下沉


一、超链接的四种样式


a:link {color: #FF0000} /* 未访问的链接 */

 a:visited {color: #00FF00} /* 已访问的链接 */

 a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

 a:active {color: #0000FF} /* 选定的链接 */


二、将链接转换为块级元素

a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; }


三、用css制作按钮

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

a { display: block; height: 34px; width: 107px; line-height: 2; text-align: center; background: url(/upload/2010-08/14/014304_btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-top: 3px; }

a:hover { background: url(/upload/2010-08/14/014304_btn_bg_hover.gif) no-repeat 0px 0px;}

</style>

</head>

<body>

<p><a href="">免费注册</a></p>

</body>

</html>


网站DIV+CSS教程培训教程X(HTMLCSS基础知识)二  html教程 divcss 第4张

四、首字下沉


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

p { width: 400px; line-height: 1.5; font-size: 14px; }

p:first-letter { font-family: "microsoft yahei"; font-size: 40px; float: left; padding-right: 10px; line-height: 1; }

</style>

</head>

<body>

<p>教程适合初学者循序渐进学习!</p>

</body>

</html>


html列表


■ul无序和ol有序列表

■改变项目符号样式或用图片定义项目符号

■横向图文列表

■浮动后父容器高度自适应

■IE6的双倍边距bug


一、ul无序和ol有序列表

<div id="layout">

 <ul>

<li><a title="1" href="" target="_blank">1</a></li>

<li><a title="2" href="" target="_blank">2</a></li>

<li><a title="3" href="" target="_blank">3</a></li>

<li><a title="4" href="" target="_blank">4</a></li>

<li><a title="5" href="" target="_blank">5</a></li>


 </ul>

 </div>


网站DIV+CSS教程培训教程X(HTMLCSS基础知识)二  html教程 divcss 第5张


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3。org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3。org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

#layout ul { list-style: none; }

#layout ul li { background: url(/upload/2010-08/17/icon.gif) no-repeat 0px 4px; padding-left: 20px; }

</style>

</head>

<body>

<div id="layout">

<ul>

<li><a title="1" href="" target="_blank">1</a></li>

<li><a title="2" href="" target="_blank">2</a></li>

<li><a title="3" href="" target="_blank">3</a></li>

<li><a title="4" href="" target="_blank">4</a></li>

<li><a title="5" href="" target="_blank">5</a></li>

</ul>

</div>

</body>

</html>

网站DIV+CSS教程培训教程X(HTMLCSS基础知识)二  html教程 divcss 第6张

网站DIV+CSS教程培训教程X(HTMLCSS基础知识)二  html教程 divcss 第7张


四、 浮动后父容器高度自适应

#layout { width:400px; border:2px solid #ccc; padding:2px;}

没有被内容元素给撑高,要解决这个问题,需要使用以下样式

overflow:auto;是让高度自适应, zoom:1;是为了兼容IE6而写


五、IE6的双倍边距bug

当浮动后设置左侧外边距时后,最左侧将显示为双倍边距,比如设置为20,而在IE6下却显示40px,解决这个问题只需应用一个样式 

display:inline;


网站DIV+CSS教程培训教程X(HTMLCSS基础知识)二  html教程 divcss 第8张


相关内容:


网站DIV+CSS教程培训教程X(HTMLCSS基础知识)一

网站DIV+CSS教程培训教程X(HTMLCSS基础知识)二

网站DIV+CSS教程培训教程X(HTMLCSS基础知识)三




上一篇:网站DIV+CSS教程培训教程X(HTMLCSS基础知识)一

下一篇:网站DIV+CSS教程培训教程X(HTMLCSS基础知识)三



除非注明,本站所有文章皆为本人原创,可随意转载但请保留链接或名字,谢谢!



相关标签:html教程divcss石家庄做网站石嘴山做网站双鸭山做网站四川做网站肃北蒙古做网站肃南裕固做网站绥芬河做网站随州做网站台山做网站太仓做网站太原做网站泰兴做网站泰州做网站唐山做网站天津做网站调兵山做网站铁岭做网站通化做网站

发表评论:

SEO姜东
    SEO姜东微信二维码

    常州SEO姜东


    从事互联网行业多年,希望分享各类互联网、SEO理念、跨境电商,扫码与我交流SEO


与我详谈SEO

常州SEO木木qq


常州SEO木木qq

SEO标签
最新留言
加我的微信:SEO-jiangd详谈网络营销