15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > HTML+CSS实现基本网页布局(一)

HTML+CSS实现基本网页布局(一)

时间:2023-09-08 21:48:02 | 来源:网站运营

时间:2023-09-08 21:48:02 来源:网站运营

HTML+CSS实现基本网页布局(一):我的打算的创作步骤是:静态页面 -> 添加特效 -> 动态页面 -> 添加后台更新 -> 进一步完善。

那么今天的第一篇文章便从HTML+CSS布局实现一个基本的静态页面开始。

首先总结一下我所掌握HTML+CSS知识,中间肯定会有错误以及整理不到位的地方,欢迎各路大佬指正,先在此拜谢!


一、html简介

超文本标记语言(HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。HTML 不是一种编程语言,而是一种标记语言,标记语言是一套标记标签 (markup tag),使用标记标签来描述网页。

二、HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词,比如 <html>,它通常是成对出现的,比如 <b> 和 </b>,标签对中的第一个标签是开始标签,第二个标签是结束标签,开始和结束标签也被称为开放标签和闭合标签。例如:

<p>这是一个段落。</p>HTML标签的种类有:

此图片引自百度百科
三、CSS样式

层叠样式表(Cascading Style Sheets,缩写为CSS),是一种样式表语言,用来描述HTML或XML文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

四、CSS样式简单介绍

1.CSS语法规则

selector {declaration1; declaration2; ... declarationN }2.CSS背景语法

div{ background-color: #70C000; 设置背景颜色 background-image: url(../img/1jmphz166b.jpg); 设置背景图像 background-repeat: no-repeat; 设置背景重复:no-reapeat不重复;repeat-x横向重复;repeat-y:纵向重复 background-position: center; 背景定位:center:居中;top:顶部;bottom:底部;right:右部;left:左部 background-attachment: fixed; 背景关联}3.CSS文本设置

p{ text-align: center; 文本对齐方式 font-family: "微软雅黑"; 字体样式 font-size: 12px; 字体大小 font-weight: bold; 字体加粗}4.链接

a:link {color:#FF0000;} 未被访问的链接 a:visited {color:#00FF00;} 已被访问的链接 a:hover {color:#FF00FF;} 鼠标指针移动到链接上 a:active {color:#0000FF;} 正在被点击的链接 5.CSS盒子模型

div{ height: 500px; 高度 width: 500px; 宽度 padding: 5px 5px; 内边距 margin: 5px 5px; 外边距 border: 5px; 边框 position: absolute; 定位 display: none; 显示 overflow: hidden; 溢出显示方式 float: left; 浮动}
以上是对我所掌握的HTML+CSS知识进行一个简单的总结与回忆,从明天开始正式开始网站的搭建与制作。

注:强烈欢迎各位大佬前来指明错误,共同进步,谢谢!

关键词:布局,基本,实现

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭