如图所示。想做一个这样的首页，HTML+CSS，怎么写呢？_随笔

首先先实现，需要两个文件。

第一个：html

第二个：div+CSS

HTML 代码如下：

</div>

</div>

</div>

</div>

</div>

</div>

</div>

CSS 文件如下：

.mar10{ margin-bottom:10px}

.divmain{margin-left:automargin-right:autowidth:950px}

.left{float:leftwidth:600pxmargin-right:10px}

.left .lef_top{height:200pxbackground:#9C3}

.left .lef_mid{height:50px}

.left .lef_mid .lef_mid_main1{float:leftwidth:300pxheight:50pxbackground:#06F}

.left .lef_mid .lef_mid_main2{float:leftwidth:300pxheight:50pxbackground:#63F}

.left .lef_btm{height:50px}

.left .lef_btm .lef_btm_main1{float:leftwidth:300pxheight:50pxbackground:#C03}

.left .lef_btm .lef_btm_main2{float:leftwidth:300pxheight:50pxbackground:#FC0}

.right{float:leftwidth:340px}

.right .rig_top{height:260pxbackground:#FC9}

.right .rig_btm{height:50pxbackground:#F9F}

下面是运行出来的效果

简单的给你做了一个，求采纳！完全是自己手写的。

复制下来放进html可以看一下。希望帮到你。在我这的预览图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<title>无标题文档</title>

<style>

*{ margin:0padding:0}

#img{ margin:0 auto margin-top:50px width:400px height:150px background:#CC3366}

#font_list{ margin:0 auto padding:0 margin-top:20px width:500px height:35px}

#font_list ul{ margin:0 padding:0 width:500px height:35px}

#font_list ul li{ margin:0 padding:0 width:500px height:35px line-height:35px list-style:none}

#font_list ul li a{ margin:0 padding:0 display:block width:50px height:35px float:left margin-left:2px font-size:16px font-family:"宋体"}

#font_list ul li a.wangye{ color:#000000 text-decoration:none}

#input_div{ margin:0 auto padding:0 width:800px height:45px}

.sougou_input{ margin:0 padding:0 width:500px height:40px border:1px #CCCCCC solid margin-left:140px line-height:40px font-size:14px}

.sougou_submit{ margin:0 padding:0 width:100px height:43px font-size:14px }

#sougou_kuaijie{ margin:0 auto padding:0 width:400px height:35px margin-top:30px}

#sougou_kuaijie ul{ margin:0 padding:0 width:400px height:35px}

#sougou_kuaijie ul li{ margin:0 padding:0 width:400px height:35px line-height:35px text-align:center}

#sougou_kuaijie ul li a{ margin:0 margin-left:10px padding:0 display:block width:60px float:leftfont-size:14px}

</style>

</head>

<body>

<img src="

</div>

<ul>

<li>

</li>

</ul>

</div>

</form>

</div>

<ul>

<li>

</li>

</ul>

</div>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zaji/7077990.html

如图所示。想做一个这样的首页，HTML+CSS，怎么写呢？

发表评论

评论列表（0条）