简单div布局设计网页格式

 时间:2024-10-12 03:19:14

1、打开我们的html文件,首先定义div标签,在文件中输入div.header+div.main然后按tab键,系统自动将页面转换成图中样式,不需要我们再一个个字符的手动输入。

简单div布局设计网页格式简单div布局设计网页格式

2、设置好标签之后,我们需要在div标签的花括号中输入主要的内容,如图所示,我们定义了头文件,h1标签,以及ul和li标签。

简单div布局设计网页格式简单div布局设计网页格式

3、如果想要网页看起来更加美观,我们需要设醅呓择锗置HTML文件遵循的css样式格式,新建一个stylesheet然后命名,自定义一个名字,在HTML文件中输入link type="text/css" rel="stylesheet" href="main.css"这里的href中输入我们创建的css文件名。

简单div布局设计网页格式简单div布局设计网页格式

4、创建css文件之后,我们要在css文件中为我们的html网页定义格式,在css中分别为header和main设置格式,如图所示,需要在.header后面的花括号中输入需要设置的内容。

简单div布局设计网页格式

5、我们可以设置头文件标签背景颜色,文字大小,边框样式,显示效果,设置完成之后,选择一个浏览器点击,预览设置效果。

简单div布局设计网页格式

6、我们可以设置内容居中显示,在h1标签中设置text-align: center;在main中设置margin: 30px auto 0 auto;这样标签中的内容就居中显示在网页中。

简单div布局设计网页格式简单div布局设计网页格式
  • CSS怎么设分别置大DIV里面的3个并排小DIV靠左 居中 靠右!
  • HTML之锚点链接
  • html怎样实现图片自动切换
  • 怎么让div居中
  • css怎么让背景图片固定不动
  • 热门搜索
    联想是什么意思 趸交是什么意思 什么的柳条 硬盘是什么 智齿什么时候长 乔欣家里到底干什么的 捉襟见肘是什么意思 杜鹃花什么时候开 计提是什么意思 结婚20年是什么婚