20140826 CSS宽度固定

最新推荐文章于 2024-09-28 19:02:23 发布

gyx13

最新推荐文章于 2024-09-28 19:02:23 发布

阅读量1.1k

点赞数

文章标签： css 导航 html

本文链接：https://blog.csdn.net/gyx13/article/details/38835885

版权

@charset "utf-8";
/* CSS Document */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none;border:none; background:none;}
textarea{resize:none;}
a{text-decoration:none; color:#656565;}

/*清浮动*/
.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;}
.fl{float:left;}
.fr{float:right;}


body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "微软雅黑";
	color: #3f484f; /*#696969*/
	width: 960px;
	margin: 0 auto;
	background-color: #f2f6f9;
}

header {
	background-color: #ff7f24;/*#f36118*/
	text-align: center;
	padding: 50px 0 30px 0;
	margin-top: 10px;
	border-radius: 6px 6px 0 0;

}

header .Ask {
	font-weight: bold;
}

header :hover{
    background-color: #f2f6f9;
    color: #ff7f24;
    transition: all 0.6s ease-in-out;
}
header a:hover{
	/*color: #606060;*/
    
}
.nav {
	
	width: 960px;
	margin:0 auto;
    overflow: hidden;
	
}

.nav li {
	
	border-bottom: 6px solid #808080;
    width: 36px;
	background-color: #FFF;
	display: inline-block;
    float: left;
    padding: 12px 62px;
    font-size: 18px;
	-webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s, border 0.3s;

}

.nav li:hover{
	background-color: #ebeff2;
	border-bottom: 6px solid #ff7f24;

}


img {
	width: 432px;
	height: 324px;
	float: right;

}

!.blur {	
    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
    
    -webkit-filter: blur(6px); /* Chrome, Opera */
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);
    
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
}

.Content {
	padding-top: 60px;
	padding-left: 40px;
	padding-right: 40px;
	padding-bottom: 50px;
	background-color: #FFF;
	border-radius: 2px 2px 0 0;
	margin-left: 0px;
    float: left;

}
.Content p {
	margin: 23px;
}

footer {
  margin: 0 auto;
  max-width: 700px;
  min-width: 400px;

  text-align: center;
  font-size: x-small;
  clear: both;	
}

footer .Disclaimer {
  font-style: italic;
}

footer p {
  margin: 3px;
}

a:link {
 color: #000000;
 transition: all 0.3s ease 0s;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0;
    text-decoration: none
}
a:visited {
 color: #000000;
 text-decoration: none
}
a:hover {
 color: #ff7f24;
 text-decoration: none;
}
a:active {
 color: #ff7f24;  
 text-decoration: none;
}

通过.nav li 中的width: 36px;固定导航列内每一项的宽度解决放大缩小导航栏与页面主体不对齐的问题

<!DOCTYPE html>
<head>
	<meta charset ="utf-8">
	<title>CILJRK</title>
	<link rel="stylesheet" type="text/css" href="my_site2.css">

</head>

<body>
	
	
	<header><a href="my_site2.html">
		<div>
			<h1>CILJRK</h1>
			<p class="Ask">/ / / | | | \ \ \</p>
			<p >Worst Taste Ever</p>
			</a>
		</div>
	</header>

	<div class="nav">
		<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">日志</a></li>
				<li><a href="#">测评</a></li>
				<li><a href="#">音乐</a></li>
				<li><a href="#">关于</a></li>
				<li><a href="#">联系</a></li>
				<div class="pencil"></div>
		</ul>
	</div>

	<div class="Content">
		<img src="img/1000platos-intro-13.gif" class="blur" >
	<h2>Haiku</h2>
	<p>perilous owl seeks</p>
	<p>cheaply, hermit grumbling earth</p>
	<p>grumbling moose groan, coy</p>
	
	<br><br><br>

	<h2>然天山者事年方去遊一打</h2>
	<p>她設怎輪品汽環：心不已似變半教。</p>

	<p>果議止電作！基多下食去。子觀到狀萬記作麼美司說久今照雖資。</p>

	<p>流人興視、管以分一？</p>

	<p>萬裡日；的便地上南了因。</p>

	<p>你視就每重我團知夫法。就內它了而出化同個完著市呢期民多……是好從全今子得心包活打兒，領想來出會、特術大人各山地，單靈北光除不。他行中兒更起少上安還化在，服度維，有了家信由物現無去器白，問細覺備社照站小就數文爸自會現方標手深建歡失花亮唱，無童女，中體持食這很書不古是負。臺度那上般病女先高條突科不深是的縣房題他月福戲有中我條人事明活出。</p>

	<p>分分用溫性然就系這一要開獲有眼了口系天先總院是內不只方上放族世麗……財量不動續們見是年士是面一去水住國；保用情來整必夜年跑說下分，沒料送，然晚年客來多件決？紀話其我標來自氣是為雲同成靜山外時無遊夫方邊點太節來華是沒標裡自門不臉程；形這家們最命提失詩子白住反；者天辦時相你易共三學會學思要銀。</p>

	<p>相重定他當無？失入果標他體。天而父主南人看心出時道速語，運天一安木古有；散的她區玩多而！議畫市有壓：每界方病方經計心色人了，施了大內來巴月器連世深排會；銀報準委的時包陽我龍為檢還超更難心成國是說信國格底區應術三爸省始，世石境港年覺聞樣。民自者表投，王訴回藥。速呢處，的花我卻故有她則讀再相方同爸一施票選到。會病示比況照就小！金政座年呢：自紙社西，然點下歌寫有去相日上子象斯青文，表合史華前層要來人少個長北史種子一著野無，假要物一古是溫、法向結確這多者經得利個們一相工友斷陸身作要心麼注有青力岸也，星西你頭活孩這黃風神都區們定達賽然把主社因的反較班難熱專用等的，我卻你人廣令大產音員風高爭雙的觀他……中有獲關政！傳樣童……們把素市不狀門時不比點代生的！無治論原都管相在開她時頭一能集。不意題說。</p>

	<p>她著是眼的童文些己開了這的教國。其車有，然滿達是完成部的條華義我錢，市界軍思利生口半：角步料整行一然個等土媽大活一斯。連華角結業溫夫之話不同好圖法，作規正意多氣面何？加定之大收起樹起幾。</p>

	<p>發於在計功許、西起的那們們不談利卻資在工，眾為下出本多養拉全步動公到必爸言友理事個山……本說用對就史數但有式能片風們見可樂她！背一思色，覺故構講不亞？取日變史主叫夜起心上要相有良港電條著能定就展。學我兒細須名大。就有轉，步環年只小被進片張！</p>

	<p>升個人特假病道眾保，隊兒專年子很不不自業事得直預有學後計阿日土國會望日老怕，傳談理是家消古式。</p>

	<p>發上面去少研子地？</p>

	<p>林我民……人聽沒根環研水我後一行百友：香一內方政現過分題學好遊達自定開影了論易這人樣德，股臺他來種是早加地死。園場平展後小以四識意；資像方的生風得素臺天同奇們經國夜什亞到己計個吸少達事合自女市金意，高想影興，個童興問這！雲亞個，樣草立知港的大離可這境個新個一理表馬和生施燈成和節大表不到會要上全。</p>

     <p>
     光環加改團一底因斯重山節紙大行的，加切牛工華稱爸道外。好歡坐高一資力問快斯意她非色麼二指，小開個消演，重陽只二活關要高子服金字個以生林麼？她方至內精都麼技，水知上藝引辦心個人他動地政金在同？不企麼間業度然這放。場件歡士住只開出那處部一由共劇多說公……些形知中像情刻是出續可著分來民，家星的為，下球麼，當住外著……發生少站推小常務器這……義坐理我然在日記、子道毛當防單開學：過戲的背難經空滿西的候兒。安後的的我人通色成我度要人計重大親生以全，一著南局，只車簡弟的色教一個！以更因為著，間完分色來做這禮化生明得工夫消導天收是負負底告親說物了愛學兒小稱行這大為供麼打……體人道了之的？放長較，作吃力能本但自續衣的功東歡，我中野高星，雄像率！來政單，們格到分已現自但，不太麼麼；卻來思市上公就我大告一爸支非如臺熱色國體車力……有於會起空電或！集他動了只眼……活樂制國好功，比樂想陽語、人形。
     </p>

     <p>
     電市坡活轉構導子能出及者面後在用方類文西服有身解水？學應來；經傳續成只、推味性外子作動她中年計軍權嚴的經子友往中容，布安口的安化方務？達推各們難風什日書響金不麼式願區。
     </p>

     <p>
     無呢雜根能的不，在高父是致身在那供的兒發女到外，國代友雲信？離紙你：市的的車：自現似來超陸從要；國態應不一了！簡食陽美醫算資讓加為，先構是分出研當的……大法見機超作來較經……了度常有考事為你前過病另格，老利備光老這未分部政資：雄小眼：親組例我往軍斷的：做作由心日法治不醫而身笑我意平軍友一化同對做你孩少海有該少是，舞母大紀，多我上人起著館往講民就思光法而竟的己，變出地環覺狀可重及對成名國觀？
     </p>

     <p>
     之動年完；給民的天克遊平前味列高，年觀但飛設更親縣，發話緊很以。天不演強著為高正問體，性車日次沒工教知，來了登民！業視要統。不個布速利何我愛一有主！情有你思區代的，起理聽式媽選來用的品共高太該影土有多手之心、講痛模成何！料山現進過在不，可個明的各續到計如容時曾我覺、的上劇和研特輪己之局卻報提，知打次集現源、腦表懷只續話員企雲喜大正來一急黨工行！
 	</p>
	</div>

<footer>
<p class="Disclaimer">These site do not reflect the views of the
author.</p>
<p>
<a href="AboutUs.html">About Us</a>
<a href="Disclaimer.html">Disclaimer</a>
<a href="ContactUs.html">Contact Us</a>
</p>
<p>Copyright © 2014</p>
</footer>

</body>
</html>