CSS学习（演示文档）

最新推荐文章于 2024-03-18 20:25:32 发布

Lola的笔记

最新推荐文章于 2024-03-18 20:25:32 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/melinda23096/article/details/35796699

版权

html+css+javascript 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

没有添加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>
<title> 曹鹏CSS 演示文档2 </title>
<style type="text/css">

</style>
</head>

<body>
    <div id="head">
            <a href="#" id="homelink"><img src="images/3.gif" alt="曹鹏CSS 演示文档2" /></a>
            <ol id="navlinks">
                 <li class="first"><a href="aboutus-ourgoal.html">关于我们</a></li>
                 <li>企业资讯</li>
                 <li><a href="#.html">供求信息</a></li>
                 <li><a href="instructions.html">企业招聘</a></li>
                 <li><a href="#">产品简介</a></li>
                 <li class="last"><a href="#">联系我们</a></li>
            </ol>
            <p id="today">
                2009年8月17日
            </p>
    </div>

<div id="content">
	<h1><b>XX公司:</b> 发展史</h1>
	<h2>XX公司</h2>
	<p>
		XX公司从事灯饰行业近二十年历史，致力于向全球照明领域提供现代灯饰产品的研发、制造和服务，积累了丰富的灯饰生产经验。在与欧美客户开展全方位深入合作的同时，积极向中国市场引进和推介世界先进的现代灯饰经营理念和消费观念，推广和普及现代灯饰光环境在家居及商业照明中的应用，以促进中国现代灯饰行业的新技术革新为使命，志愿作推动中国现代灯饰行业变革和发展的先驱。
		<img src="images/2.jpg" width="96" height="140" class="deng" alt="" />
		XX公司秉承“做中国灯饰质量品牌”的目标，以 ISO9001:2000 国际质量体系、国际电工灯具产品标准和国家灯具产品标准作为产品研发、制造和质量控制检验标准，其产品先 后获得德国、英国、瑞典、美国、加拿大等世界多数发达国家客户认可，以及中国国家 CCC 强制认证，确保以国际先进质量水平的产品同时供应国际和国内合作伙伴。
	</p>
	<p>
		为满足国际市场的巨大需求，我们组建一支由专业设计人员、技术人员、管理人员组成的团队，“全力以赴，做到更好”，积极拓展海内外市场。
	</p>
	<p>
		以科技领先为己任、以时尚个性的设计风格与电子科技的综合运用为核心竞争力，成为有特色的创业领先企业，是我们的发展目标，热诚欢迎海内外客户与创业朋友来电来函垂询，携手共创光辉事业。
	</p>
    <p>
		The Light Corporation has gained an enviable reputation for exemplary lighting design and project development, consistently delivering desirable, original lighting schemes and products for commercial, residential and leisure environments. 
	</p>
	<p>
Throughout the world our lighting illuminates some of the finest hotels, bars, restaurant's, retail & leisure facilities and the homes of many leading businessmen and women, sports and entertainment professionals and personalities, successful movers and shakers from all walks of life! 
	</p>
	<p>
The Light Corporation website provides details of our creative lighting consultancy, bespoke luminaire design & manufacture and exhibits the finest range of standard products made in England. 
	</p>
</div>

<div id="sidebar">
    <form id="search" action="" method="post">
        <input type="text" class="text" />
        <input type="submit" value="搜索" />
    </form>

    <div id="zhaoming">
        <h3>灯饰业发展现状</h3>
        <h4>现代照明技术</h4>
        <p>现代照明技术的不断进步，新材料、新工艺、新科技成果的层出不穷，广泛应用，以及人们对各种照明原理及其使用环境的深入研究，在极大的丰富现代灯光、灯具、灯饰对照明环境的表现力与美化手段的同时，也突破了单纯照明、亮化环境的传统理念。</p>
        <img src="images/1.jpg" alt="" />
    </div>

    <div id="post-archive">
	<h3>存档</h3>
        <table cellspacing="2">
        <caption>2008年3月</caption>
        <thead>
        <tr>
        <th scope="col" class="sun">日</th>
        <th scope="col" class="mon">一</th>
        <th scope="col" class="tue">二</th>
        <th scope="col" class="wed">三</th>
        <th scope="col" class="thu">四</th>
        <th scope="col" class="fri">五</th>
        <th scope="col" class="sat">六</th>
        </tr>
        </thead>
        <tbody>
        <tr>
        <td class="sun"></td>
        <td class="mon"></td>
        <td class="tue"></td>
        <td class="wed"></td>
        <td class="thu"></td>
        <td class="fri"></td>
        <td class="sat">1</td>
        </tr>
        <tr>
        <td class="sun">2</td>
        <td class="mon">3</td>
        <td class="tue">4</td>
        <td class="wed">5</td>
        <td class="thu">6</td>
        <td class="fri"><a href="#">7</a></td>
        <td class="sat">8</td>
        </tr>
        <tr>
        <td class="sun">9</td>
        <td class="mon">10</td>
        <td class="tue"><a href="#">11</a></td>
        <td class="wed">12</td>
        <td class="thu">13</td>
        <td class="fri">14</td>
        <td class="sat">15</td>
        </tr>
        <tr>
        <td class="sun">16</td>
        <td class="mon">17</td>
        <td class="tue">18</td>
        <td class="wed">19</td>
        <td class="thu"><a href="#">20</a></td>
        <td class="fri"><a href="#">21</a></td>
        <td class="sat">22</td>
        </tr>
        <tr>
        <td class="sun">23</td>
        <td class="mon"><a href="#">24</a></td>
        <td class="tue">25</td>
        <td class="wed"><a href="#">26</a></td>
        <td class="thu">27</td>
        <td class="fri">28</td>
        <td class="sat">29</td>
        </tr>
        <tr>
        <td class="sun">30</td>
        <td class="mon">31</td>
        <td class="tue"></td>
        <td class="wed"></td>
        <td class="thu"></td>
        <td class="fri"></td>
        <td class="sat"></td>
        </tr>
        </tbody>
        </table>
    </div>
</div>

<div id="footer">
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Site design by  (<a href="http://www.caopeng.org">caopeng.org</a>)</p>
</div>

</body>
</html>

css样式表：

/* ------------- "everywhere" styles */

body {
	margin: 0;
	padding: 0;
	color: #333333;
	background-color: #F1D3A7;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
}

a {
	text-decoration: none;
}

a img {
	border: 0;
}

p {
	margin: 0 0 1em;
}

/* ------------- head styles */

#head {
	margin-bottom: 21px;
	padding-top: 1px;
	background-color: #99CC33;
}
#homelink {
	display: block;
	margin-top: 12px;
	margin-right: 24px;
	margin-bottom: 12px;
	margin-left: 24px;
	padding-top: 24px;
	padding-right: 0;
	padding-bottom: 6px;
	padding-left: 12px;
	background-image: url(images/rili.gif);
	background-repeat: no-repeat;
	background-position: 100% 100%;
}

#navlinks {
	margin: 0;
	color: #FFF;
	padding-top: 6px;
	padding-right: 36px;
	padding-bottom: 6px;
	padding-left: 36px;
	background-color: #CC9900;
}

#navlinks li {
	display: inline;
	margin-right: 6px;
	padding-right: 9px;
	border-right: 1px solid #99C;
	font-weight: bold;
}

#navlinks li.last {
	border-right: 0;
}

#navlinks a {
	color: #D4EC84;
}

#today {
	margin-top: -20px;
	padding: 0 24px 0 0;
	color: #FFF;
	font-weight: bold;
	text-align: right;
	line-height: 1;
}


/* ------------- main column styles */

#content {
	float: left;
	padding: 0 240px 48px 36px;
}

#content h1 {
	margin: 0 33% 15px -24px;
	padding: 6px 24px;
	background: #FFF;
	color: #686397;
	font-size: 18px;
}

#content h1 b {
	color: #B0D742;
}

#content h2 {
	margin: 6px 0;
	padding-bottom: 3px;
	border-bottom: 1px solid #B0D742;
	font-size: 18px;
}

#content img.deng {
	float: left;
	margin: 12px 12px 12px 0;
}

/* ------------- sidebar styles */

#sidebar {
	float: left;
	width: 204px;
	margin: 0 0 48px -216px;
}

#sidebar form, #sidebar div h3 {
	background: #9B96CA;
}

#sidebar form {
	margin: 0;
	padding: 9.6px;
}

#sidebar form .text {
	width: 108px;
}

#sidebar div {
	background: #3A3C2D; color: #FFF;
	padding: 0 12px 12px;
	margin-top: 9px;
}
	
#sidebar div h3 {
	font-size: 15px;
	margin: 0 -12px; 
	padding: 5px 12px;
}

#zhaoming h4 {
	margin: 0 0 6px;
	padding: 6px 0;
	border-bottom: 1px solid #FFF;
	font-weight: normal;
}

#zhaoming p:first-line {
	font-style: italic;
}

#zhaoming img {
	display: block;
	margin: 12px auto 0;
}

#post-archive table {
	margin: 0 auto;
	font-size: small;
}

#post-archive caption {
	margin: 12px auto 0;
	font-size: larger;
	font-weight: bold;
}

#post-archive td {
	padding: 0;
	border: 1px solid #787A6B;
	background: #5B5D4E; 
	color: #222;
	text-align: center;
}

#post-archive table a {
	display: block;
	font-weight: bold;
	color: #FFF;
}

#post-archive table a:hover {
	background: #ABD240;
}


/* ------------- footer styles */

#footer {
	clear: both;
	padding: 30px 36px;
	background: #A0C63A;
}

#footer p {
	margin: 0;
}

#footer a {
	color: #333;
	text-decoration: underline;
}