CSS+DIVの練習?花展_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS+DIVの練習?花展_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:33 PM

这是第四个了，没有别的，高兴了就练练手，积累积累技巧。

界面：

CSS+DIV源码：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>css练手</title><style type="text/css">body{	margin:0px;	padding:0px;	font-family:Arial, Helvetica, sans-serif;	font-size:12px;	background-color:#FFD8D9;}#container{	position:relative;	margin:0px auto 0px auto;	width:700px;	text-align:left;}#navigation{	width:700px;	height:33px;	margin:0px;	padding:0px;}#navigation ul{	list-style:none;	margin:0px;	padding:0px;}#navigation ul li{    text-align:center;	float:left;	margin:0px;	padding:0px;	width:100px;}#navigation ul li a{	display:block;	background:url(button1.jpg) no-repeat;	padding:9px 6px 11px 6px;}#navigation ul li a:link,#navigation ul li a:visited{	color:black;	text-decoration:none;}#navigation ul li a:hover{	background:url(button1_bg.jpg) no-repeat;	color:white;}#left{	width:180px;	float:left;	background:#FFFFFF url(leftbottom.jpg) no-repeat bottom; /* 下端圆角 */	margin:1px 0px 0px 0px;}#login{	background:#FFFFFF url(login.jpg) no-repeat;	padding:55px 0px 10px 0px;}#login form{	padding:0px; margin:0px;}#login p {	margin: 0px;	text-align: left;	padding: 5px 0px 0px 25px;}#login p input{	font-family:Arial, Helvetica, sans-serif;	font-size:12px;}#login .text{	border:none;	border-bottom:1px solid black;	padding: 0px;	width: 90px;}#login .btn{	border: 1px solid black;    background-color: #FFEFF0;	height: 17px;	padding: 0px;}#login p a:link, #login p a:visited{	color:#333333;	text-decoration:none;}#login p a:hover{	color:#000088;	text-decoration:underline;}#category{	background:#FFFFFF url(category.jpg) no-repeat;	padding: 55px 0px 40px 0px;}#category h4{	margin: 0px 18px 0px 18px;	padding: 3px 0px 1px 5px;	background-color: #FFD1D1;	font-size:12px;}#category ul{	margin: 0px;	padding: 5px 22px 15px 22px;	list-style:none;}#category ul li{	padding: 2px 0px 2px 16px;	border-bottom: 1px dashed #999;	background: url(icon1.gif) no-repeat 5px 7px;}#category ul li a:link, #category ul li a:visited{	color:#000000;	text-decoration:none;}#category ul li a:hover{	color:#666666;	text-decoration:underline;}#main{	float:left;	width:518px;	margin:1px 0px 0px 2px;}#news{	background:url(latest.jpg) no-repeat;	padding:35px 0px 0px 0px;}#news img{	border:none;	padding-left:1px;}#recommend{	background:url(recommend.jpg) no-repeat;	margin:3px 0px 0px 0px;	padding:35px 0px 0px 0px;	background-color:#FFFFFF;}#recommend br,#new br, #guid br{	display:block;	clear:both;	margin:0px; 	padding:0px;}#recommend ul, #new ul{	list-style:none;	margin:0px;	padding:5px 5px 5px 8px;}#recommend ul li, #new ul li{	text-align:center;	float:left;	width:125px;}#recommend ul li img, #new ul li img{	border:none;	margin:5px 0px 3px 0px;	padding:0px;}#new{	background:url(new.jpg) no-repeat;	margin:3px 0px 0px 0px;	padding:35px 0px 0px 0px;	background-color:#FFFFFF;}#guid{   	background:url(tips.jpg) no-repeat;	margin:3px 0px 0px 0px;	padding:35px 0px 0px 0px;	background-color:#FFFFFF;}#guid ul{	list-style:none;	margin:0px;	padding:5px 5px 5px 30px;}#guid ul li{	background:url(icon2.gif) no-repeat 5px 6px;	padding:1px 0px 1px 12px;	float:left;	width:220px;	}</style><div id="container">	 <div id="banner">    	<img  src="/static/imghwm/default1.png" data-src="banner.jpg" class="lazy" alt="CSS+DIVの練習?花展_html/css_WEB-ITnose" >    </div>     <div id="navigation">    	<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>            <li><a href="#">支付方式</a></li>        </ul>        <br>    </div>    <div id="left">		<div id="login">			<form>				<p>用户: <input type="text" class="text"></p>				<p>密码: <input type="text" class="text"></p>				<p><input type="button" class="btn" value="登录"> <input type="button" class="btn" value="注册"> <a href="#">忘记密码</a></p>			</form>		</div>		<div id="category">			<h4 id="span-用途-span"><span>用途</span></h4>			<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>				<li><a href="#">生日送花</a></li>				<li><a href="#">生日送花</a></li>			</ul>			<h4 id="span-花材-span"><span>花材</span></h4>			<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>				<li><a href="#">百合花</a></li>				<li><a href="#">百合花</a></li> 			</ul>			<h4 id="span-价格-span"><span>价格</span></h4>			<ul>				<li><a href="#">100～200元</a></li>				<li><a href="#">200～300元</a></li>				<li><a href="#">300～400元</a></li>				<li><a href="#">400～500元</a></li>				<li><a href="#">500～600元</a></li>				<li><a href="#">600～800元</a></li>				<li><a href="#">800元以上</a></li>			</ul>		</div>        <div id="leftbottom"><img  src="/static/imghwm/default1.png" data-src="leftbottom.jpg" class="lazy" alt="CSS+DIVの練習?花展_html/css_WEB-ITnose" ></div>	</div>   <div id="main">          <div id="news">        	<img  src="/static/imghwm/default1.png" data-src="new1.jpg" class="lazy" alt="CSS+DIVの練習?花展_html/css_WEB-ITnose" ><img  src="/static/imghwm/default1.png" data-src="new2.jpg" class="lazy" alt="CSS+DIVの練習?花展_html/css_WEB-ITnose" ><img  src="/static/imghwm/default1.png" data-src="new3.jpg" class="lazy" alt="CSS+DIVの練習?花展_html/css_WEB-ITnose" >       </div>      <div id="recommend">          <ul>              <li>
<img  src="/static/imghwm/default1.png" data-src="flower1.jpg" class="lazy" alt="CSS+DIVの練習?花展_html/css_WEB-ITnose" >幸福的味道$288元</li>              <li>
<img  src="/static/imghwm/default1.png" data-src="flower2.jpg" class="lazy" alt="CSS+DIVの練習?花展_html/css_WEB-ITnose" >幸福的味道$288元</li>              <li>
<img  src="/static/imghwm/default1.png" data-src="flower3.jpg" class="lazy" alt="CSS+DIVの練習?花展_html/css_WEB-ITnose" >幸福的味道$288元</li>              <li>
<img  src="/static/imghwm/default1.png" data-src="flower4.jpg" class="lazy" alt="CSS+DIVの練習?花展_html/css_WEB-ITnose" >幸福的味道$288元</li>              <li>
<img  src="/static/imghwm/default1.png" data-src="flower5.jpg" class="lazy" alt="CSS+DIVの練習?花展_html/css_WEB-ITnose" >幸福的味道$288元</li>              <li>
<img  src="/static/imghwm/default1.png" data-src="flower6.jpg" class="lazy" alt="CSS+DIVの練習?花展_html/css_WEB-ITnose" >幸福的味道$288元</li>              <li>
<img  src="/static/imghwm/default1.png" data-src="flower7.jpg" class="lazy" alt="CSS+DIVの練習?花展_html/css_WEB-ITnose" >幸福的味道$288元</li>              <li>
<img  src="/static/imghwm/default1.png" data-src="flower8.jpg" class="lazy" alt="CSS+DIVの練習?花展_html/css_WEB-ITnose" >幸福的味道$288元</li>          </ul>          <br>        </div>           <div id="new">    	 <ul>          <li>
<img  src="/static/imghwm/default1.png" data-src="flower9.jpg" class="lazy" alt="CSS+DIVの練習?花展_html/css_WEB-ITnose" ><br>粉色迷情</li>            <li>
<img  src="/static/imghwm/default1.png" data-src="flower10.jpg" class="lazy" alt="CSS+DIVの練習?花展_html/css_WEB-ITnose" ><br>粉色迷情</li>              <li>
<img  src="/static/imghwm/default1.png" data-src="flower11.jpg" class="lazy" alt="CSS+DIVの練習?花展_html/css_WEB-ITnose" ><br>粉色迷情</li>               <li>
<img  src="/static/imghwm/default1.png" data-src="flower12.jpg" class="lazy" alt="CSS+DIVの練習?花展_html/css_WEB-ITnose" ><br>粉色迷情</li>     	 </ul>      	 <br>        </div>      <div id="guid">    	<ul>				<li>花的喜怒哀乐与人的各种感觉</li>				<li>花的喜怒哀乐与人的各种感觉</li>				<li>花的喜怒哀乐与人的各种感觉</li>				<li>花的喜怒哀乐与人的各种感觉</li>				<li>花的喜怒哀乐与人的各种感觉</li>				<li>花的喜怒哀乐与人的各种感觉</li>				<li>花的喜怒哀乐与人的各种感觉</li>				<li>花的喜怒哀乐与人的各种感觉</li>                <li>花的喜怒哀乐与人的各种感觉</li>				<li>花的喜怒哀乐与人的各种感觉</li>				<li>花的喜怒哀乐与人的各种感觉</li>				<li>花的喜怒哀乐与人的各种感觉</li>		</ul>          <br>     </div>      </div>
</div>

CSS+DIV做出的网页很精简嘛。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLの目的：Webブラウザがコンテンツを表示できるようにするMay 03, 2025 am 12:03 AM

HTMLの中心的な目的は、ブラウザがWebコンテンツを理解して表示できるようにすることです。 1。HTMLは、タグなどのタグを介してWebページの構造とコンテンツを定義します。 3.HTMLは、ユーザーの相互作用をサポートするフォーム要素を提供します。 4. HTMLコードの最適化は、HTTP要求の削減やHTMLの圧縮など、Webページのパフォーマンスを改善できます。

Web開発にとってHTMLタグが重要なのはなぜですか？May 02, 2025 am 12:03 AM

htmltagsareSterenceforwebdevelovementasyStheStructureanhandhancewebpages.1）theydefineLayout、semantics、and-interactivity.2）semanticagsimprovecessibility.3）opeusofusofagscanoptimizeperformanceandensurecross-brows-compativeation。

HTMLタグと属性に一貫したコーディングスタイルを使用することの重要性を説明します。May 01, 2025 am 12:01 AM

コードの読みやすさ、保守性、効率を向上させるため、一貫したHTMLエンコーディングスタイルは重要です。 1）低ケースタグと属性を使用します。2）一貫したインデントを保持し、3）シングルまたはダブルの引用符を選択して固執する、4）プロジェクトのさまざまなスタイルの混合を避け、5）きれいなスタイルやEslintなどの自動化ツールを使用して、スタイルの一貫性を確保します。

ブートストラップ4にマルチプロジェクトカルーセルを実装する方法は？Apr 30, 2025 pm 03:24 PM

Bootstrap4にマルチプロジェクトカルーセルを実装するソリューションBootstrap4にマルチプロジェクトカルーセルを実装するのは簡単な作業ではありません。ブートストラップですが...

DeepSeekの公式Webサイトは、マウススクロールイベントの浸透の影響をどのように達成していますか？Apr 30, 2025 pm 03:21 PM

マウススクロールイベントの浸透の効果を実現する方法は？ Webを閲覧すると、いくつかの特別なインタラクションデザインに遭遇することがよくあります。たとえば、DeepSeekの公式ウェブサイトでは、...

HTMLビデオの再生コントロールスタイルを変更する方法Apr 30, 2025 pm 03:18 PM

HTMLビデオのデフォルトの再生コントロールスタイルは、CSSを介して直接変更することはできません。 1. JavaScriptを使用してカスタムコントロールを作成します。 2。CSSを介してこれらのコントロールを美化します。 3. video.jsやPLYRなどのライブラリを使用すると、互換性、ユーザーエクスペリエンス、パフォーマンスを検討してください。プロセスを簡素化できます。