当前位置:编程学习 > html/css >>

列表导航栏实例(02)——精美电子商务网站赏析

【准备工作】

一、如图示,创建网站框架:

 

二、reset.css文件参考内容:

[css] view plaincopyprint?/*YUI的CSS Reset
 */ 
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td 

    padding: 0; 
    margin: 0; 

table 

    border-collapse: collapse; 
    border-spacing: 0; 

fieldset, img 

    border: 0; 

address, caption, cite, code, dfn, em, strong, th, var 

    font-weight: normal; 
    font-style: normal; 

ol, ul 

    list-style: none; 

caption, th 

    text-align: left; 

h1, h2, h3, h4, h5, h6 

    font-weight: normal; 
    font-size: 100%; 

q:before, q:after 

    content: ''; 

abbr, acronym 

    border: 0; 

/*YUI的CSS Reset
 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td
{
    padding: 0;
    margin: 0;
}
table
{
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img
{
    border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var
{
    font-weight: normal;
    font-style: normal;
}
ol, ul
{
    list-style: none;
}
caption, th
{
    text-align: left;
}
h1, h2, h3, h4, h5, h6
{
    font-weight: normal;
    font-size: 100%;
}
q:before, q:after
{
    content: '';
}
abbr, acronym
{
    border: 0;
}

【说明】

 据说是YUI的CSS Reset,版本不详,有知道源文件出处的还望不吝赐教。

这个文件,在此处主要起作用的是{padding: 0; margin: 0;},相当于取代了常用设置*{padding: 0; margin: 0;}。

三、引用图片

bg-header.jpg

 \

bg-pattern.jpg

 

 \

nav.png

 \

【操作步骤】

一、效果

 \

二、HTML

[html]
<!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=utf-8" /> 
    <link href="css/reset.css" rel="stylesheet" type="text/css" /> 
    <link href="css/layout.css" rel="stylesheet" type="text/css" /> 
    <title>无标题页</title> 
</head> 
<body> 
    <div id="header"> 
        <ul id="nav"> 
            <li><a href="#" id="farm">Our Farm</a></li> 
            <li><a href="#" id="blog">The Blog</a></li> 
            <li><a href="#" id="shop">Shop</a></li> 
            <li><a href="#" id="info">Info & Extras</a></li> 
            <li><a href="#" id="contact">Contact Us</a></li> 
        </ul> 
    </div> 
</body> 
</html> 

<!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=utf-8" />
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <link href="css/layout.css" rel="stylesheet" type="text/css" />
    <title>无标题页</title>
</head>
<body>
    <div id="header">
        <ul id="nav">
            <li><a href="#" id="farm">Our Farm</a></li>
            <li><a href="#" id="blog">The Blog</a></li>
            <li><a href="#" id="shop">Shop</a></li>
            <li><a href="#" id="info">Info & Extras</a></li>
            <li><a href="#" id="contact">Contact Us</a></li>
        </ul>
    </div>
</body>
</html>【说明】

本实例中,导航栏三个状态是在lay.css文件中的样式中,由背景图片nav.png实现的,列表中的列表项文字并没有显示出来,也许会在不支持样式表的掌上网络设备中显示吧。

三、CSS

[css] view plaincopyprint?/*- LET'S GET STARTED!
----------------------------------------------------------------------*/ 
body 

    background: url(../images/bg-pattern.jpg); 
    font-family: "adobe-garamond-pro-1" , "adobe-garamond-pro-2" , Georgia, "Times New Roman" , Times, serif; 
    color: #6B5F51; 
    font-size: 14px; 

 


    text-decoration: none; 

 
a:focus 

    outline: none; 

 
 
 
/*- HEADER
----------------------------------------------------------------------*/ 
#hea

补充:web前端 , HTML/CSS  ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,