结合HTML5的语义化标签，运用DIV＋CSS网页布局技术设计一个个人博客页面

CSS+DIV页面布局

结合HTML5的语义化标签，运用DIV+CSS网页布局技术设计一个个人博客页面。要求：
（1）header标签定义页面头部区；nav标签定义导航区；div标签定义中部的内容区块，其中左边用section标签嵌套两篇article文章区，每篇文章区应含有头部的标题区、段落内容和页脚；右边用aside设计侧栏；底部用footer标签定义版权信息，如图2.1所示。
（2）编写外部CSS文件，为主文件中用到的各个标签属性进行样式设置，如背景色，字体，字号大小，对齐方式等。
（3）用无序表实现水平导航菜单，关键点：消除无序列表前的项目符号，将默认的垂直排列转换为水平排列。
（4）设置导航菜单的超链接样式，关键点：链接目标为#，设置鼠标悬停在导航栏中的热字上时背景色的变化。

html代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>小饼干的博客</title><link rel="stylesheet" href="个人博客界面设计.css" type="text/css"></head><body background="小兔.jpg";style=" background-repeat:no-repeat ;background-size:100% 100%;background-attachment: fixed;"><header>小饼干的博客</header><nav><ul><li><a href="#" style="text-decoration: none;">首页</a><li>&nbsp;<li><a href="#" style="text-decoration: none;">博文</a><li>&nbsp;<li><a href="#" style="text-decoration: none;">相册</a><li>&nbsp;<li><a href="#" style="text-decoration: none;">个人档案</a><></ul></nav><div><section><article1><a1>HTML5</a1><a2>HTML5是下一代HTML的标准,目前仍然处于发展阶段。经过了Web2.0时代,基于互联网的应用已经越来越丰富,同时也对互联网应用提出了更高的要求。</a2><a3>编辑于2020.11</a3></article1><article2><a1>CSS3</a1><a2>对于前端设计师来说,虽然CSS3不全是新的技术，但它却重启了一扇奇思妙想的窗口。</a2><a3>编辑于2020.11</a3></article2><ction><aside><h1>简介</h1></br><p><span>HTML5和CSS3</span>正在掀起一场变革，它不是在替代Flash，而是正在发展成为开放的Web平台，不但在移动领域建功卓著，而且对传统的应用程序发起挑战。</p></aside></div><footer>版权所有2020</footer></body>
<html>

css代码：

*{padding:0;margin:0;font-family: "仿宋";color: #5D478B;
}header{width: 500px;height: 80px;font-size: 70px;font-weight: bold;margin:1px auto;color: #68228B;}nav{width: 2000px;height: 45px;background-color: rgba(255,182,193,0.5);font-size: 32px;padding-left: 20px;padding-top: 5px;}div{width: 2000px;height: 520px;float: left;}aside{width: 260px;height: 410px;background-color: rgba(255,130,171,0.4);border-radius: 10px;margin:20px 20px;float: left;font-size: 25px;padding: 35px;}section{width: 1125px;height: 500px;margin:20px 20px;float: left;}article1{width: 1125px;height: 225px;border:2.5px solid     #FFB6C1;border-radius: 10px;float: left;}article2{width: 1125px;height: 235px;border:2.5px solid    #FFB6C1;border-radius: 10px;margin-top: 10px;float: left;}footer{width: 1600px;height: 30px;border-top: 5px solid #FFC0CB;clear: both;margin: auto;padding: 0px 720px;font-size: 20px;}a1{width: 1100px;height: 60px;border-bottom: 2.5px dotted #FFB6C1;float: left;margin: 0px 10px;font-size: 50px;font-family: "comic sans ms";}a2{width: 1100px;height: 100px;border-bottom: 2px solid #FFB6C1;float: left;margin: 20px 10px 0px 10px;font-size: 25px;}a3{width: 1125px;height: 35px;float: left;margin: 10px 10px;font-size: 18px;}span{color: #FF1493;}ul{list-style-type: none;}li{display: inline-block;}li:hover{background-color: #FF3E96;border-radius: 10px;}

效果图展示(｡>∀<｡)

结合HTML5的语义化标签，运用DIV＋CSS网页布局技术设计一个个人博客页面相关推荐

HTML5概述 - 语义化标签
一.HTML5 简介 1.什么是 HTML5 HTML5 不是一门新的语言,而是我们之前学习的 HTML 的第五次重大修改版本. 2.HTML 的发展历史 •超文本标记语言(第一版,不叫 HTML 1 ...
html5新语义化标签
HTML5的浏览器兼容支持Html5的浏览器包括Firefox (火狐浏览器) , IE9及其更高版本,Chrome (谷歌浏览器),Safari, Opera等; 国内的遨游浏览器(Maxthon ...
HTML5新增语义化标签（HTML5）
HTML5新增语义化标签(HTML5) <!DOCTYPE html> <html lang="en"><head><meta chars ...
html css网页布局实例简单,Div+CSS网页布局项目实战一（含设计图、HTML和CSS源文件）...
网页的基本结构新建一个文件夹,命名为"DIV+CSS布局练习",在文件夹下新建两个空的记事本文档,输入以下内容: Div+CSS网页布局项目实战:页面布局与规划|www.125j ...
web前端 --- CSS（04） -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...
Float构建三栏DIV CSS网页布局
你对用float构建三栏DIV CSS网页布局的用法是否熟悉,这里和大家分享一下,用绝对定位的方法从CSS中得到固定宽度的布局并不困难:但是得到液态布局就有点困难了,因此现在都开始抛弃基于表格的布局技 ...
Div+CSS网页布局对网站搜索引擎优化的影响
Div+CSS网页布局对网站搜索引擎优化的影响我们都知道DivCSS网页布局的好处,它对网站搜索引擎优化的影响有哪些呢? 网站优化使用 DIV+CSS佈局,页面代码精简,这一点相信对XHTML有所瞭 ...
html语义化标签例子,0820作业：HTML5新增语义化标签及实战总结
作业1:HTML5 新增语义化布局标签实例 html> html5新增的语义化标签 initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, ...
DIV+CSS网页布局（新手必备)
文章目录一:网页布局的目的二:如何布局 (1):确定"版心" (2):分析模块三:页面元素的定位机制 (1)流式布局 (2)浮动-float (3)绝对定位(position ...

结合HTML5的语义化标签，运用DIV＋CSS网页布局技术设计一个个人博客页面

CSS+DIV页面布局

结合HTML5的语义化标签，运用DIV＋CSS网页布局技术设计一个个人博客页面相关推荐

最新文章

热门文章