zoukankan      html  css  js  c++  java
  • 自己写的页面4

    未完成,大家可以继续扩展

    css代码:

    body, div, span, p, a, img, ul, ol, li, table, th, tr, td, form, fieldset, legend, dl, dt, dd, blockquote, applet, object {
    	border: 0;
    }
    
    body{
    background: #192d40 url(images/bg.jpg) repeat-x ;  /*实现渐变效果*/
    	font: "Copperplate Gothic Light";
    	line-height: 1.2em;
    	 900px;
    	height: 750px;
    	color: #e8eaeb;
    }
    
    a{
    	color: #e5e5e5;
    }
    
    #layout{
    	margin: 0 auto;
    }
    
    #header{
    	position: relative;
    	padding-left: 7px;
    }
    
    #logo{
    	780px;
    	height: 80px;
    	text-align: left;
    	color: #cccccc;
    	position: relative;
    	margin: 0;
    	line-height: 100px;
    }
    
    #logo a{
    	text-decoration: none;
    }
    
    .light{
    	color: #2b4866;
    }
    
    .leaf{
    	position:absolute;
    	background: url(images/leaf.gif)  45px 5px no-repeat;
    	 120px;
    	height: 80px;
    	left: 0;
    	top: 10px;
    }
    
    h1{
    	margin: 15px 0 10px 0;
    	font-weight: bold;
    }
    
    #nav {
    	position: relative;
    	z-index: 2;
    	border: 1px solid #1a2735;
    	border-right: none;
    	border-left: none;
    	padding: 7px 0;
    }
    
    #nav li{
    	list-style-type: none;
    	display: inline;
    	padding: 0;
    	margin: 0;
    }
    
    #nav  ul li a{
    	text-decoration: none;
    	font-size: 19px;
    	font-weight: bold;
    	float: left;
    	display: block;
        padding: 7px 25px 7px 7px;
        line-height: 18px;
    }
    
    #nav ul li span{
    	font-size: 11px;
    	font-weight: normal;
    	color: #67707a;
    }
    
    h2{
    	color: #E5E5E5;
    }
    
    h3{
    	padding-left: 50px;
    }
    
    div.in p{
    	text-align: right;
    	color: #CCCCCC;
    	padding-left: 50px;
    }
    
    #ul2{
    	padding-left: 80px;
    }
    

      html代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    		<meta http-equiv="content-language" content="cs" />
    		<meta name="author" lang="cs" content="..." />
    		<meta name="copyright" lang="cs" content="..." />
    		<meta name="description" content="..." />
    		<meta name="keywords" content="..." />
    		<meta name="robots" content="all,follow" />
    		<link href="style.css" type="text/css" rel="stylesheet" media="screen,projection" />
    		<!--[if lte IE 6]>
    
    		<link href="css/msie.css" type="text/css" rel="stylesheet" media="screen,projection" />
    
    		<![endif]-->
    		<link rel="stylesheet" media="print" type="text/css" href="css/print.css" />
    		<title>Mintidea – Free CSS Template</title>
    	</head>
    	<body>
    		<div id="layout">
    			<div id="header">
    				<h1 id="logo"><a href="./" title="Company">mint<span class="light">idea</span><span class="leaf"> </span></a></h1>
    				<hr class="noscreen" />
    				<div id="nav" class="box">
    					<ul>
    						<li>
    							<a href="/">Home
    							<br />
    							<span>Main page</span></a>
    						</li>
    						<li>
    							<a href="/">Who
    							<br />
    							<span>Our team</span></a>
    						</li>
    						<li>
    							<a href="/">What
    							<br />
    							<span>Our services</span></a>
    						</li>
    						<li>
    							<a href="/">Portfolio
    							<br />
    							<span>Our woks</span></a>
    						</li>
    						<li>
    							<a href="/">Prices
    							<br />
    							<span>How much it costs</span></a>
    						</li>
    						<li>
    							<a href="/">Contact
    							<br />
    							<span>Write us!</span></a>
    						</li>
    					</ul>
    					<hr class="noscreen" />
    				</div>
    				<hr class="noscreen" />
    				<div id="container" class="box">
    					<div id="obsah" class="content box">
    						<div class="in">
    							<h2>Lorem ipsum dolor!</h2>
    							<p>
    								Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    							</p>
    							<h3>Dolor sit amet:</h3>
    							<ul id="ul2">
    								<li>
    									<a href="#">Dolor in reprehenderit</a>
    								</li>
    								<li>
    									<a href="#">In reprehenderit</a>
    								</li>
    								<li>
    									<a href="#">Molot in reprehenderit in volupta</a>
    								</li>
    								<li>
    									<a href="#">Rure dolor in reprehenderit in volupta</a>
    								</li>
    							</ul>
    							<h3>Lorem ipsum dolor</h3>
    							<p>
    								Lorem ipsum dolor sit amet, consectetur adipisicing elit, im veniam, quis n ullamco laboris nisi ut aliquip
    
    								im veniam, quis n ullamco laboris nisi ut aliquip sed do eiusmod tempor incididunt ut labore et dolore magna
    
    								aliquaim veniam
    							</p>
    							<p>
    								Quis n ullamco laboris nisi ut aliquip. Ut enim ad minim veniam, quis n ullamco laboris nisi ut aliquip ex ea commodo consequat.
    							</p>
    							<p>
    								Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    							</p>
    							<p>
    								Lorem ipsum dolor sit amet, consectetur adipisicing elit, im veniam, quis n ullamco laboris nisi ut aliquip
    
    								im veniam, quis n ullamco laboris nisi ut aliquip.
    							</p>
    						</div>
    					</div>
    					<div id="panel-left" class="box panel">
    					</div>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>
    

      


    ==============================================================================

    本博客已经废弃,不在维护。新博客地址:http://wenchao.ren


    我喜欢程序员,他们单纯、固执、容易体会到成就感;面对压力,能够挑灯夜战不眠不休;面对困难,能够迎难而上挑战自我。他
    们也会感到困惑与傍徨,但每个程序员的心中都有一个比尔盖茨或是乔布斯的梦想“用智慧开创属于自己的事业”。我想说的是,其
    实我是一个程序员

    ==============================================================================
  • 相关阅读:
    关于ARMv8另外几个问题
    C++中的内存区域及其性能特征
    外点惩处函数法·约束优化问题
    【LaTeX排版】LaTeX论文模版
    fatal error: vector: No such file or directory
    【UNIX网络编程(三)】TCP客户/server程序演示样例
    LOJ#6437. 「PKUSC2018」PKUSC
    mybatis 学习一 建立maven项目
    maven学习5 构建MyBatis项目
    maven学习4 使用Maven构建Spring项目
  • 原文地址:https://www.cnblogs.com/rollenholt/p/2117488.html
Copyright © 2011-2022 走看看