html+css首页设计,html网站首页设计

http://www.itjxue.com  2023-01-04 15:33  来源:未知  点击次数: 

怎样做html页面的css页面布局

页面布局是用HTML来实现的,CSS只是添加样式,网站提倡的结构和样式相分离就是这个意思。HTML实现的是骨架,css可以说是实现了装饰。

1、用div来实现,css3之前常用

2、css3实现

然后实现结构的基础上添加css样式,希望对你有所帮助,望采纳!

html+css怎么做网页?

创建一个文本文档,输入以下内容:

!DOCTYPE html

html

head

style

p {

background-color: lightblue;

}

/style

/head

body

h1Hello World!/h1

pp标签拥有浅蓝色背景色!/p

/body

/html

然后保存文件,将后缀名修改为.HTML,然后用浏览器打开,一个简单的网页就出现了。

简单的网页设计,HTML,css,大学生作业(很简单)?

图片看不清楚,是鼠标经过的时候文字变色吗,可以使用html标签的伪类属性,示例如下

a:hover{color:red}

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

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

第一个:html

第二个:div+CSS

HTML?代码如下:

div class="divmain"

? div class="left"

? div class="lef_top mar10"

? ?

? /div

? ? ? ?div class="lef_mid mar10"

? ? ? div class="lef_mid_main1"

? ? ? ?

? /div

? ? ? ? ? ?div class="lef_mid_main2"

? ? ? ? ?

? /div

? /div

? ? ?

? ? ? ?div class="lef_btm "

? ? ? div class="lef_btm_main1"

? ? ? ?

? /div

? ? ? ? ? ?div class="lef_btm_main2"

? ? ? ? ?

? /div

? /div

? ?

? /div

? ?div class="right"

? ? div class="rig_top mar10"

? /div

? ? ? div class="rig_btm"

? /div

? /div

/div

CSS 文件如下:

.mar10{ margin-bottom:10px;}

.divmain{margin-left:auto;margin-right:auto;width:950px}

.left{float:left;width:600px;margin-right:10px}

.left .lef_top{height:200px;background:#9C3;}

.left .lef_mid{height:50px;}

.left .lef_mid .lef_mid_main1{float:left;width:300px;height:50px; background:#06F}

.left .lef_mid .lef_mid_main2{float:left;width:300px;height:50px; background:#63F}

.left .lef_btm{height:50px;}

.left .lef_btm .lef_btm_main1{float:left;width:300px;height:50px; background:#C03}

.left .lef_btm .lef_btm_main2{float:left;width:300px;height:50px;background:#FC0}

.right{float:left;width:340px}

.right .rig_top{height:260px; background:#FC9}

.right .rig_btm{height:50px; background:#F9F}

下面是运行出来的效果

(责任编辑:IT教学网)

更多

推荐网络工程师文章