自学CSS的几个例子

　　最近在学CSS的一些知识，一遍学一遍自己写网页熟悉CSS的用法，下面收录了两个例子（这些例子都独立建立了.css文件和.html文件，在.html文件中通过<link>载入css样式），虽然挺丑的，大家凑活着看吧。具体css用法请结合W3C网站http://www.w3school.com.cn/css/index.asp进行查找（这绝对是硬广植入）。

例子1：简单页面制作介绍动漫人物

style1.css文件：

body{
    background-image: url(http://img2.3lian.com/2014/f5/151/d/77.jpg);
    background-size: 100% 100%;
    background-repeat: no repeat;
    background-attachment: fixed;
    background-origin: center-box;
    font-style: italic;
    font-size: 100%;
}
h1{
    color: rgb(34,139,34);
    text-shadow: 2px 2px 2px #7FFF00;
}
p{
    color: rgb(34,139,34);
    text-indent: 1cm;
    line-height: 1.1em;
    font-weight: bold;
    font-size: 1.1em;
}
a:link{
    color: rgb(135,206,250);
    text-decoration: none;
}
a:visited{
    color: rgb(135,206,250);
    text-decoration: none;
}
a:hover{
    color: rgb(255,00,255);
    font-size: 150%;
    text-decoration: none;
}
a:active{
    color: rgb(00,00,250);
    text-decoration: none;
}

img{
    border-radius:25px;
    float: left;
    margin-right: 10px;
}
strong{
    font-size: 30px;
}

ex1.html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
    <title>CSS basis-1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Wayne Ng" />
    <meta name="description" content="CSS Basis-1" />
    <meta name="revised" content="Wayne Ng,2016/1/14" />
    <link rel="stylesheet" type="text/css" href="style1.css" >
</head>
<body>
    <h1>三笠·阿克曼</h1>
    <img src="http://img5q.duitang.com/uploads/item/201404/06/20140406114817_hwen5.thumb.700_0.jpeg" alt="三笠·阿克曼"height="500" width="250"/ >
    <p><strong>动</strong>漫作品《进击的巨人》中女主角，艾伦·耶格尔的青梅竹马，在儿时被艾伦救过一条命。无家可归时被艾伦父子带回了家，后二人经常一起活动，互相视对方为最重要的人。由于身为耶格尔家养女之故，与艾伦经常一起行动。流着东洋人血统，是个沉默寡言、表情稀少的少女，与阿明·阿诺德也是旧识，小时候曾居住在同一个地区，三个人关系很要好。以第104期训练兵团首席的身份毕业，性格沉稳冷静，有以一敌百的战斗力。目前与艾伦一同加入调查兵团，并且参与作战。<a href="http://baike.baidu.com/item/%E4%B8%89%E7%AC%A0%C2%B7%E9%98%BF%E5%85%8B%E6%9B%BC?fromtitle=%E4%B8%89%E7%AC%A0&type=syn" target="_blank">更多...</a></p>

</body>
</html>

页面效果：

例子2：依旧是动漫人物介绍orz，保证比例子1好看。。。

style2.css文件：

body{
    background-image: url(http://b.hiphotos.baidu.com/zhidao/pic/item/86d6277f9e2f0708198efce2ed24b899a801f24d.jpg);
    background-repeat: no repeat;
    background-attachment: fixed;    
    background-size: 100% 100%;
    background-origin: center-box;
}
table{
    border-collapse: collapse;
    outline: outset #C0C0C0 thin;
    margin-top: 5%;
    margin-bottom: 50px;
    box-shadow: 5px 5px 5px #ADD8E6;
}
th{
    border:2px solid #ADD8E6;
    text-align: center;
    padding: 10px;
    color: #F0F8FF;
    background-color: #8470FF;
}
td{
    border:2px solid #ADD8E6;
    text-align: center;
    padding: 10px;
    color: #000000;
    background-color: #F0F8FF;
    width: 200px;    
}
a{
    text-decoration: none;
    color: #6495ED;
}
a:hover{
    color: #FF4500;
}
div.img{
    border: 2px solid #ADD8E6;
    float: left;
    background-color: #F0F8FF;
}
div.img img{
    width:150px;
    height: 150px;
    opacity:0.4;
    transition:width 0.5s, height 0.5s;
    -moz-transition:width 0.5s, height 0.5s, -moz-transform 0.5s; /* Firefox 4 */
    -webkit-transition:width 0.5s, height 0.5s, -webkit-transform 0.5s; /* Safari and Chrome */
    -o-transition:width 0.5s, height 0.5s, -o-transform 0.5s; /* Opera */
}
div.img img:hover{
    opacity:1.0;    
    transform:scale(1.5,1.5);

}
div.img div.desc{
    text-align: center;
    font-weight: normal;
    width: 150px;
    background-color: #F0F8FF;
    color: #6495ED;
}
div.block{
    margin-bottom: 20%;
}

ex2.html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>CSS basis-2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Wayne Ng" />
    <meta name="description" content="CSS Basis-2" />
    <meta name="revised" content="Wayne Ng,2016/1/14" />
    <link rel="stylesheet" type="text/css" href="style2.css" >
</head>
<body>
    <table>
        <tr>
            <th colspan="3">海贼王-王下七武海</th>
        </tr>
        <tr>
            <td>姓名</td><td>绰号</td><td>恶魔果实</td>
        </tr>
        <tr>
            <td><a href="http://baike.baidu.com/view/1887653.htm" target="_blank">波雅·汉库克</a></td><td>海贼女帝</td><td>甜甜果实</td>
        </tr>
        <tr>
            <td><a href="http://http://baike.baidu.com/view/2280030.htm" target="_blank">乔拉可尔·米霍克</a></td><td>鹰眼</td><td>无</td>
        </tr>
        <tr>
            <td><a href="http://baike.baidu.com/link?url=yfpT0DbP53f9k-quQK0NONDkmuO7lysw_rgCMZ-5qkInRQ3YsI6M86PtLPKvLTF1V1JwEWjf0sslLtMD887aMxaVn5zHVX4H7ozbBhz1C4zwi9i_WHWtRMdH7DWt-vltAPSWum5Hk5ja7DOwY6VM4R5Z4rEcsk3DaxQIPXHiracs77SwExXQIK8Xzpqlx3bbETSCWqgr4cWj5_bHzlYH6K" target="_blank">巴索罗缪·熊</a></td><td>暴君</td><td>肉球果实</td>
        </tr>
        <tr>
            <td><a href="http://baike.baidu.com/link?url=psub3B2sl1pFpu446BdksP4HqRXXqlOpoSreu-ItcxMpKwxfv-3fHfA3O2E5DUv0ztZNIuJNehp_G-McY8zy1CcWh5EXAcPiGm8GhJEDv0Sdlqu_KhP7krYnsPPfCWpuI4-Uj7Q6OZCQ0Gd7WcSccs37Z_2fvy-tUUgcB3f7U66kFUa9yp1TOsHp7WlnCEhB" target="_blank">巴基</a></td><td>小丑之王</td><td>四分五裂果实</td>
        </tr>
        <tr>
            <td><a href="http://baike.baidu.com/link?url=YYLDCW1vT9vDh_4w50doTWoy04kDpZfdBpfFKW56cDZHTBpsoxZhCiQheqjM66JdaotSihGJqk2eUxh4YVTDUlBrQW8_CtqNt2yL-h744Gwfm9SMiiG69ihes6GrzH6_cWQqYkDfOBtrZW5uLVPqKaSVHdaL15KK_8rHjGSBT0Fez1Ma19MqwEratIVwWfU7" target="_blank">堂吉诃德·多佛朗明哥</a></td><td>天夜叉</td><td>线线果实</td>
        </tr>
        <tr>
            <td><a href="http://baike.baidu.com/link?url=J96ZsIGLBcPqlH93ro1gi4LRPshV888d8SRcNBWtEMVydgYNdYuVBgSZ-0_kMSqsRVm6aAf7mxbIalhFQlyYB4HlV8t6Qi4nkj26j-uWmxWVvL9HkkV92UU4fxLkmk2Lf2Ta17jmprbOqHqI3F0B7DC53W1KdRB2eWjtpUidy-nS2Gm26XZr7kr3agUVVMZN" target="_blank">沙·克洛克达尔</a></td><td>沙鳄鱼</td><td>沙砾果实</td>
        </tr>
        <tr>
            <td><a href="http://baike.baidu.com/link?url=fMEp7Y40FP0WQHTw4pCy-9E8mx5JQg08xqZ9xPzf-eFq-Jl_8OhoKK-wczeVbGl7Zp6r8a3Ggb1IPrjKldyOaq" target="_blank">莫利亚</a></td><td>月光</td><td>影影果实</td>
        </tr>
    </table>
    <div class="block">
        <div class="img">
        <img src="http://wanzao2.b0.upaiyun.com/system/avatars/6930058/original/20141018132446317.png" />
        <div class="desc">波雅.汉库克</div>
        </div>
        <div class="img">
            <img src="http://imgsrc.baidu.com/forum/pic/item/43a7d933c895d143f2625d8573f082025aaf077b.jpg" />
            <div class="desc">乔拉可尔·米霍克</div>
        </div>
        <div class="img">
            <img src="http://img.265g.com/img2/201212/201212041545083079.jpg" />
            <div class="desc">巴索罗缪·熊</div>
        </div>
        <div class="img">
            <img src="http://www.qq1234.org/uploads/allimg/150408/1KG2HF-2.jpg" />
            <div class="desc">巴基</div>
        </div>
        <div class="img">
            <img src="http://f.hiphotos.baidu.com/baike/s%3D220/sign=7ef86d17cbfc1e17f9bf8b337a90f67c/f603918fa0ec08fa6c6cc9a65dee3d6d55fbda47.jpg" />
            <div class="desc">堂吉诃德·多佛朗明哥</div>
        </div>
        <div class="img">
            <img src="http://file.ipadown.com/uploads/news_thumb/13854457383816.jpg" />
            <div class="desc">沙·克洛克达尔</div>
        </div>
        <div class="img">
            <img src="http://img1.gamersky.com/image2015/05/20150506xdj_6/image006.jpg" />
            <div class="desc">莫利亚</div>
        </div>
    </div>
</body>
</html>

页面效果：

　　　　　　　　　　　　　　　　　　　　　　　　修订于2016/1/14 By野马菌

posted on 2016-01-14 20:46 野马菌阅读(172) 评论(0) 编辑收藏举报