《CSS权威指南》

来源：互联网发布：linux 网络唤醒 s3 编辑：程序博客网时间：2024/05/01 06:02

HTML：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <link href="StyleSheet.css" rel="stylesheet" /></head><body>    <div id="wrapper">        <header><!--一级-->            <section id="title"><!--二级-->                <!--h1和h2-->                <h1>Stylin&#8217;with CSS</h1>                <!--三级-->                <h2> The Blog and Books of Charles Wyke-Smith</h2>            </section>            <nav id="menu"><!--二级-->                <!--菜单-->                <ul>                    <li class="choice1"><a href="#">Articles</a></li>                    <li class="choice2"><a href="#">Books</a></li>                    <li class="choice3"><a href="#">Resources</a></li>                    <li class="choice4"><a href="#">Booksshelf</a></li>                    <li class="choice5"><a href="#">Contact</a></li>                </ul>            </nav>            <form id="search" action="#" method="post"><!--二级-->                <!--搜索-->                <label for="user_name">search</label><!--标注的for属性与文本ID相同-->                <input type="text" id="user_name" name="user_name" placeholder="search" />            </form>        </header>        <section id="feature_area"><!--一级-->            <article id="blog_leadoff"><!--二级-->                <!--博客内容-->                <div id="inner">                    <h4>September 7,2012</h4>                    <a href="#"><h3>Managing CSS Class with JQuery</h3></a>                    <img src="image/73FDFE5267E22EC01B15426B118C1404.jpg" />                    <p>                        There are moments in life when you miss someone so much that you just want to pick them from your                        dreams and hug them for real! Dream what you want to dream;go where you want to go;be what you want to be,                        because you have only one life and one chance to do all the things you want to do.May you have enough happiness                        to make you sweet,enough trials to make you strong,enough sorrow to keep you human,enough hope to make you happy?                        Always put yourself in others’shoes.If you feel that it hurts you,it probably hurts the other person, too.                        The happiest of people don’t necessarily have the best of everything;they just make the most of everything that                        comes along their way.Happiness lies for those who cry,those who hurt, those who have searched,and those who have                        tried,for only they can appreciate the importance of people                    </p>                </div>            </article>            <aside><!--二级-->                <form id="signin"><!--三级-->                <!--登录表单-->                <fieldset><!--作为表单控件的容器-->                    <!--控件组的标题-->                    <legend><span>Sign In for Code and Updates</span></legend>                    <section><!--用于为控件、标注和说明添加样式的外包装-->                        <label for="email">Email</label>                        <input type="text" name="email" id="email"/>                    </section>                    <section>                        <label for="password">Password</label>                        <input type="password" id="password" name="password" maxlength="20"/>                    </section>                    <section>                        <input type="submit" value="Sign In"/>                        <p id="signup">Not Sign up?<a href="#">Register now!</a></p>                    </section>                </fieldset>                </form>                <nav>                    <!--三级-->                    <h3>Recent Articles</h3>                    <!--博文链接-->                    <ul>                        <li><a href="#">Z-index&mdash;Layers of Confusion</a></li>                        <li><a href="#">Box-Image Techniques</a></li>                        <li><a href="#">Shadow FX with CSS3</a></li>                    </ul>                </nav>            </aside>        </section>               <footer><!--一级-->            <!--页脚文本和nav元素-->            <nav><!--二级-->            </nav>        </footer>    </div>    <!--wrapper结束--></body></html>

CSS样式：

body {    font-family:helvetical,Arial,sans-serif;    background:#efefef;    margin:0;}wrapper{    width:980px;    margin:0 auto 20px;}header {    position:relative;    height:100px;    margin:10px 0;    background:#fff;    border-radius:20px 0px 20px 0px;    box-shadow:0 12px 8px -9px #555;    padding:1px;}header section#title{    position:absolute;    width:300px;    height:65px;    left:0;    top:0;}header h1{    font-size:2.2em;    letter-spacing:-.025em;    font-weight:700;    padding:9px 12px 0;    line-height:1px;}header h2{    font-size:.9em;    font-weight:400;    padding:0px 12px;    letter-spacing:-.025em;    line-height:1px;}form#search{    position:absolute;    width:150px;    top:23px;    right:20px;}#search input{    float:right;    width:70px;    padding:2px 0 3px 5px;    border-radius:10px 0px 10px 0px;    outline:none;    /*-webkit-transition:2s width;*/}/*#search input:focus{width:140px;}#search lable{display:none;}form#search input {background-color:#fff;}form#search input::-webkit-input-placeholder{color:#ccc;}*/nav#menu {    text-align:center;    font-size:.8em;}nav#menu>ul{    display:inline-block;}nav#menu li{    float:left;    list-style-type:none;    position:relative;}nav#menu li a{    display:block;    /*text-align:left;*/    text-decoration:none;    padding:.25em .8em;    font-family:"Source Sans Pro",helvetica,sans-serif;    font-weight:600;    font-size:1.2em;    font-style:normal;    /*-webkit-font-somoothing:antialiased;*/}nav#menu li.choice1 a{background:#f58c21;}nav#menu li.choice2 a{background:#4eb8ea;}nav#menu li.choice3 a{background:#d6e636;}nav#menu li.choice4 a{background:#ee4c98;}nav#menu li.choice5 a{background:#f58c21;}nav#menu li:hover>a{    color:#555;    /*border-color:#fff;    border:0;*/}nav#menu li:last-child a{border-bottom-right-radius:10px;}nav#menu li:first-child a{border-top-left-radius:10px;}section#feature_area{    overflow:hidden;    margin:16px 0 0;    padding:0 0 10px;}section#feature_area article{    float:left;    width:66%;}section#feature_area aside{    float:right;    width:34%;}section#feature_area article #inner{    padding:12px;    background:#fff;    border-radius:20px 0;    box-shadow:0 12px 8px -9px #555;}section#feature_area article a{text-decoration:none;}section#feature_area article img{    float:left;    padding:0 10px 10px 0;}section#feature_area article h4{    font-family:"Source Sans Pro",helvetica,sans-serif;    font-style:normal;    font-weight:400;    font-size:1em;    color:#f58c21;    letter-spacing:-.025em;} section#feature_area article h3{     font-family:Loto,helvetica,sans-serif;     font-size:1.75em;     font-style:normal;     font-weight:700;     color:#555;     margin:0px 0 12px 0px;     letter-spacing:-.05em; } section#feature_area article#blog_leadoff p::first-letter{     font-family:"Source Sans Pro",helvetica,sans-serif;     font-size:1.1em;     font-weight:700;     font-style:normal;     float:left;     margin:.05em .05em 0 0;     line-height:0.6;     text-shadow:1px 3px 3px #ccc; } section#feature_area article#blog_leadoff p::first-line{     font-variant:small-caps;     font-size:1.2em; } form#signin{     width:19em;     float:right;background:#fff;     border-radius:10px 0 10px 0;     box-shadow:0 12px 8px -9px #555; } #signin fieldset{     border:0;     margin:10px 14px; } #signin legend span{     font-family:Lato,helvetica,sans-serif;     font-weight:700;     font-size:1.3em;     line-height:1.1em;     color:#4eb8ea;     letter-spacing:-.05em; } #signin section{     overflow:hidden;     padding:.25em 0; } #siginin section lable{     font-family:"Source Sans Pro",helvetica,sans-serif;     font-weight:400;     float:left;     width:5em;     margin:.5em .3em 0 0;     line-height:1.1;     color:#555; } #signin section input{     float:right;     width:10.5em;     margin:.2em 0 0 .5em;     padding:3px 10px 2px;     color:#555;     outline:none;     border-radius:10px 0 10px 0; } input:-webkit-autofill{     color:#fff !important; } #signin section input[type=submit]{     float:right;     width:auto;     margin:0 2px 3px 0;     padding:0px 8px 3px;     font-size:1em;     font-weight:800;     color:#fff;     border:none;     background-color:#d6e636;box-shadow:1px 1px 2px #888; } #signin section p{     float:right;     clear:both;     margin:.2em 0 0;     text-align:right;     font-size:.8em;     line-height:1;     color:#555; } #sigin section p a:hover{     color:#777;     text-decoration:none;  } #sigin section p a{     color:#333; } .signin section p.direction.error{     display:block;     color:#f00; } .signin section p.direction{     display:none; } section#feature_area nav{     width:19em;     float:right;     margin:15px 0 0;     padding:.6em 0em .75em;     background:#fff;     border-radius:10px 0 10px 0;     box-shadow:0 12px 8px -9px #555; }section#feature_area nav h3{     padding:0 27px 0;     font-family:Lato,helvetica,sans-serif;     font-weight:700;     font-size:1.3em;     text-align:left;     color:#aaa;     letter-spacing:-.05em; }#feature_area nav ul{margin:0em 0 0 5px;}#feature_area nav li{    padding:.7em 0 0 2em;    position:relative;    list-style-type:none;}#feature_area nav li:before{    content:"";    position:absolute;    height:10px;    width:10px;    left:12px;    top:12px;    border-radius:5px 0 5px 0;    background-color:#d6e636;    box-shadow:1px 1px 2px #888;}#feature_area nav li a{    display:block;    text-decoration:none;    font-size:.9em;    color:#616161;}#feature_area nav li a:hover{color:#000;}

0 0