HTML+CSS网页设计
分享
文章平均质量分 70
HTML+CSS基础学习+项目操作（包含部分CSS3动画）。掌握HTML语言基础，学习使用列表、表格和框架来定义网页结构，学习使用表单来收集用户信息，学习使用CSS对网页进行美化。
超级会员免费看
逍遥小丸子
这个作者很懒，什么都没留下…
展开
-
【HTML5】网页实用技巧5：鼠标移上去图片放大（父级盒子大小不变）-使用 CSS3 属性制作
需要实现的效果：鼠标移上去，图片放大，但是图片所在的父级盒子大小不变实现思路：利用CSS3 的 transform属性实现放大，给父级元素使用 overflow 属性（1）制作一个 div ，用来作为图片的父级盒子（2）使用 img 标签，引入图片，设置图片大小和父级盒子一样（3）给图片使用伪类选择器 :hover（4）图片放大，transform属性值，使用 scal() 函数（5）给父级盒子，添加 overflow : hidden;（6）使用过渡属性 tran...原创 2020-12-24 10:53:48 · 4785 阅读 · 0 评论 -
【HTML5】网页实用技巧4：使用 CSS3 属性制作 3D 文字效果
需要实现的效果：将普通文字，实现3D效果，使用CSS属性制作实现思路：利用CSS3 的 text-shadow属性实现语法结构：text-shadow: h-shadow v-shadow blur color;值 描述 h-shadow 必需。水平阴影的位置。允许负值。（可使用px作为单位） v-shadow 必需。垂直阴影的位置。允许负值。（可使用px作为单位） blur 可选。模糊的距离。（可使用px作为单位） color 可..原创 2020-12-12 11:39:51 · 556 阅读 · 0 评论 -
【HTML5】网页实用技巧3：将方形图片设置成圆形后，添加圆形虚线边框
需要实现的效果：将原本是方形的图片，变成圆形，且添加一个圆形边框实现思路：①制作一个正方形div盒子，将图片放在div盒子里②将盒子设置成圆形（利用 border-radius 属性）③设置图片的border-radius 属性实现代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>圆形图片虚线框-王迪</title>.原创 2020-12-12 09:47:29 · 4039 阅读 · 0 评论 -
【HTML5】网页实用技巧2：设置动画自动循环播放，鼠标移上去，停止动画播放
需要实现的效果：圆形图片，一直执行旋转的动画，鼠标移上去时，动画停止实现思路：①制作一个圆形图片，制作步骤参照：圆形图片的制作②创建动画，关键内容：@keyframes 的使用③给图片使用动画，关键属性：animation 属性的使用④给图片添加 hover 伪类选择器，鼠标移上去时，动画停止，关键属性animation-play-state:paused;实现代码：<!DOCTYPE html><html> <head> ..原创 2020-12-10 11:21:55 · 4424 阅读 · 0 评论 -
【HTML5】Web前端——网页实用技巧1：将一个方形图片，变成圆形（利用CSS属性）
需要效果：将原本是长方形、正方形的图片，变成一个圆形图片这样的好处：不需要对图片进行特别的处理，直接使用实现思路：①制作一个方形div盒子，将图片放在div盒子里②将盒子设置成圆形（利用 border-radius 属性）③设置盒子的 overflow 属性值为 hidden实现代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <titl..原创 2020-12-10 10:48:12 · 8957 阅读 · 1 评论 -
【HTML5】Web前端——制作 3D 旋转魔方相册
实现效果：第一步：新建项目，将准备好的图片素材放在 img 文件夹中第二步：在 body 里制作图片结构，将6张图片，分别放在div盒子里，外面有一个大盒子用来放图片。第三步：设置基本的CSS样式 <style type="text/css"> html{ -webkit-perspective: 800px; } #cube{ width:200px; ..原创 2020-12-02 09:47:19 · 3915 阅读 · 1 评论 -
【HTML5】Web前端——第六课：CSS3 的变形属性、过渡属性、动画属性、多列属性
知识点：CSS3 的 2D 变形属性、 3D 变形属性、过渡属性、动画属性、多列属性先导知识：【HTML5】Web前端——第五课：CSS3新增背景属性、文本属性、盒模型属性、2D变形属性CSS3 在原来的基础上增加了变形和动画相关属性，通过这些属性，以前需要用 JavaScript 才能实现的功能，现在可以很轻松地实现。CSS3 的变形功能可以对元素进行位移、旋转、缩放、倾斜 4 种几何变换的操作；CSS3 的动画功能则是和位移、旋转、缩放、倾斜 4 种几何变换操作相结合，从而产生平滑的动画..原创 2020-12-02 21:41:35 · 2105 阅读 · 0 评论 -
【HTML5】Web前端——第五课：CSS3新增背景属性、文本属性、盒模型属性
知识点：CSS3新增背景属性、字体文本相关属性、盒模型属性、变形动画属性、多列属性。1、CSS3 新增背景属性原创 2020-11-19 09:19:11 · 474 阅读 · 0 评论 -
【HTML5】Web前端——第四课：CSS3新增选择器
知识点：CSS3 新增的选择器、新增的属性选择器、新增的伪类选择器、新增的伪元素选择器推荐学习网页：CSS 选择器（菜鸟教程）1、CSS 3 简介CSS就是层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。而 CSS 3 就是最新的 CSS 标准。我们现在说的 CSS 3 ，指的是那些在 CSS 2.1 之后发布的所有东西。 CSS 很早已经开始被分割成多个独立的模块，每个模块可以独立分级，每个模块值包含一小部分功能，所以某个进展缓慢的模块不会拖慢整个规范的指定工作。C.原创 2020-11-06 16:36:13 · 438 阅读 · 0 评论 -
【HTML5】Web前端——第三课：HTML5 表单相关元素和属性
知识点：原有的表单元素及表单控件、HTML5 表单新增功能类型、HTML5 表单控件新增的属性推荐阅读：HTML+CSS第四课：表单标签的使用-制作注册表单1、原有的表单元素及表单控件表单，是页面与Web服务器交互过程中最重要的信息来源，在网页中的作用不可小视，负责获取用户填写的数据，并通过浏览器向服务器传送数据。因此，在需要与用户交互的Web页面中，表单是极为常见的。表单的作用：实现人机交互。 表单里的形式、种类：通过input标签实现，如输入文本信息的、密码显示为*的、点选性别的.原创 2020-11-05 08:14:02 · 1015 阅读 · 1 评论 -
【HTML5】Web前端——第二课：HTML5新增的常用元素、HTML5的通用属性
知识点：HTML5 新增的文档结构元素、文本格式化元素、页面增强元素、多媒体元素、HTML5 的通用属性（全局属性）、HTML5 废1、弃的元素和属性1、HTML5 新增的常用元素1.1 文档结构元素在HTML5 出现之前，HTML 页面只能用<div>元素作为结构元素，为代码阅读带来了极大的困扰，因此在HTML5 中增加了大量的结构元素，如<header>、<footer>、<aside>、<nav>等。有了这些新增的结构元素..原创 2020-10-29 08:58:05 · 524 阅读 · 3 评论 -
【HTML5】Web前端开发初级下——第一课：初识HTML5、HTML5保留的常用元素
知识点：原创 2020-10-26 10:29:06 · 667 阅读 · 0 评论 -
HTML+CSS项目实践九——设置网站导航栏悬浮在网页最上面
实现原理参照：HTML+CSS项目实践六：HTML中设置文字浮在图片上方的两种方法（背景图片法、DIV+CSS定位法）原创 2020-09-25 11:00:17 · 7469 阅读 · 0 评论 -
HTML+CSS项目课2：利用table和表单制作“网易邮箱注册页面”
知识点：html文档基本结构、table标签布局、表单标签的使用、img标签、a标签、p标签等常见标签的使用。制作网页效果： 网页制作思路：1、将整个网页分成4部分：3个表格+底部段落文字（3个表格设置同样的宽度，水平居中，边框为0等属性）2、表格1：一个1行2列的表格，左边单元格放logo图，右边单元格放“帮助”3、表格2：一个1行1列的表格，单元格里放图片4、表...原创 2018-11-09 20:36:31 · 4300 阅读 · 0 评论 -
HTML+CSS扩展内容：div盒子隐藏常用的属性display和visibility的区别
知识点：盒子的隐藏属性display和visibility1、display属性和visibility属性的相同点： display和visibility都是CSS属性，都可以控制盒子的显示和隐藏。 2、display属性和visibility属性的不同点： （1）属性取值不一样：display属性的取值有：block和none。其中block...原创 2019-02-17 10:18:01 · 2368 阅读 · 0 评论 -
HTML+CSS初学者练习项目1：利用HTML简单标签制作《我的自我介绍》网页
适合初学者练习的HTML项目：制作一个《自我介绍》网页。需要掌握内容：HTML+CSS第一课：初识HTML-3个步骤创建自己的第一个html网页HTML+CSS第二课：格式标签、图像标签、链接标签的使用HTML+CSS第五课：使用Dreamweaver工具制作网页知识点：HTML文档基本结构、图像标签<img /> 、段落标签<p></p...原创 2019-04-04 10:19:50 · 37686 阅读 · 4 评论 -
HTML+CSS初学者练习项目3：利用table+CSS制作《互联世纪网》
适合初学者练习的HTML项目：制作一个《互联世纪网》网页。需要掌握内容：HTML+CSS第三课：表格标签的使用HTML+CSS第六课：初识CSS之CSS选择器的使用、为HTML文档添加CSS样式的3种方式HTML+CSS第七课：CSS复合选择器的使用、CSS继承特性、使用CSS美化页面元素知识点：1、HTML基本文档结构2、TABLE布局、跨行跨列的使用3、...原创 2019-04-11 17:00:08 · 1120 阅读 · 1 评论 -
HTML+CSS初学者练习项目4：利用DIV+CSS制作《互联世纪网》
适合初学者练习的HTML项目：利用DIV+CSS制作制作一个《互联世纪网》网页。需要掌握内容：HTML+CSS第八课：使用CSS布局网页——网页中块级元素与行内元素、盒子模型的理解HTML+CSS第九课：使用CSS布局网页——盒子的定位、浮动和浮动塌陷及解决办法知识点：1、DIV盒子模型2、DIV布局、CSS属性的使用3、浮动属性的使用4、浮动塌陷的解决办法...原创 2019-04-16 17:46:39 · 1232 阅读 · 0 评论 -
HTML+CSS初学者练习项目5：利用DIV+CSS制作个人CPS网站《汽车坐垫点评网》——首页
知识点：div布局、css样式引用制作效果图：网站制作思路：1、分析网站构成：本网站一共设计三个页面：首页、列表页、内容页。2、在DW中新建站点，做好网站建设准备工作（将网站要用到的图片统一放在站点文件里）。3、对于同一个网站来说，每一个页面的logo、导航栏、底部版权信息是一样的。（整个网站风格统一）4、制作网页和写css样式。5、预览网页效果，将三个网页关...原创 2019-05-12 21:56:26 · 1500 阅读 · 0 评论 -
HTML+CSS初学者练习项目5：利用DIV+CSS制作个人CPS网站《汽车坐垫点评网》——列表页
制作效果图：制作思路：1、页面的logo、导航条、底部版权信息，和网站首页一样，可以复制粘贴代码2、网页内容布局拆分3、编写html代码和css样式制作《汽车坐垫点评网》——列表页第一步：在DW中新建一个html文件，命名为liebiao.html，并保存在站点文件夹中。第二步：在DW中新建一个css文件，命名为liebiao.css，并保存在站点文件夹中。...原创 2019-05-19 20:24:55 · 824 阅读 · 0 评论 -
HTML+CSS初学者练习项目5：利用DIV+CSS制作个人CPS网站《汽车坐垫点评网》——内容页
制作效果图：制作思路：1、页面的logo、导航条、底部版权信息，和网站首页一样，可以复制粘贴代码2、网页内容布局拆分3、编写html代码和css样式制作《汽车坐垫点评网》——内容页第一步：在DW中新建一个html文件和css，分别命名为neirong.html和neirong.css，并保存在站点文件夹中。第二步：在neirong.html中的head标签里，链...原创 2019-05-21 09:39:53 · 944 阅读 · 0 评论 -
HTML+CSS项目实践四：给html网页标题栏添加logo图标（ico格式图片）
实现效果： 制作思路：1、准备一张ico格式图片2、在<head>标签里使用<link />标签，引用icon图片 实现代码：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; chars原创 2018-12-26 09:42:38 · 16328 阅读 · 1 评论 -
HTML+CSS项目实践八：同一个HTML页面，在不同电脑上的显示效果不一样！解决HTML页面针对不同分辨率的问题
表象问题：同一个HTML页面，在不同电脑上的显示效果不一样。（样式错位等）举例说明：当电脑分辨率不同时，第二张图片的样式无法完全展示。 问题分析：由于电脑屏幕分辨率不同，像素密度不同，视觉上会有差异，甚至差异很大。参考资料：百度流量统计院 分辨率使用情况：http://tongji.baidu.com/data/screen解决方案一：设定固定...原创 2018-12-29 17:22:10 · 16709 阅读 · 1 评论 -
HTML+CSS第七课：CSS复合选择器的使用、CSS继承特性、使用CSS美化页面元素
知识点：CSS复合选择器、CSS的继承、使用CSS设置字体样式和文本样式、使用CSS设置链接样式（伪类选择器）、使用CSS设置列表的样式。1、CSS的高级应用1.1 CSS复合选择器CSS符合选择器是以标签选择器、类选择器、ID选择器这3种基本选择器为基础，通过不同方式将两个或多个选择器组合在一起而形成的选择器。这些复合而成的选择器，能实现更强、更方便的选择功能。复合选择器分为后代选择...原创 2018-11-18 17:51:01 · 1706 阅读 · 1 评论 -
HTML+CSS第六课：初识CSS之CSS选择器的使用、为HTML文档添加CSS样式的3种方式
知识点：CSS的概念及语法、CSS选择器的使用、CSS选择器的优先级、添加CSS样式的3种方式。1、CSS概念理解 CSS 是Cascading Style Sheet的缩写，可以翻译为“层叠样式表”或者“级联样式表”，即“样式表”。层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语...原创 2018-11-11 19:23:20 · 938 阅读 · 0 评论 -
HTML+CSS第五课：使用Dreamweaver工具制作网页、详细解读HTML头部标签、网页头部标签的SEO设置
知识点：Dreamweaver工具的使用、HTML头部标签解读、网页头部标签的SEO设置1、Dreamweaver工具 Adobe Dreamweaver，简称“DW”，中文名称 "梦想编织者"，最初为美国MACROMEDIA公司开发 ，2005年被Adobe公司收购。DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 HTML、CSS、JavaScri...原创 2018-11-02 22:06:48 · 4080 阅读 · 1 评论 -
HTML+CSS项目课1：利用table制作百度首页
知识点：html文档基本结构、table标签布局、在单元格中插入文字、图片、链接、表单。网页效果图：制作思路：将整个网页当做一个table表格1、制作一个6行1列的表格2、在单元格中插入相关内容3、在第4行的单元格里插入一个form表单<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "...原创 2018-11-09 22:05:01 · 1565 阅读 · 0 评论 -
HTML+CSS第四课2：利用表单标签制作一个百度搜索框
知识点：表单<form>标签、<input />标签的使用。问题描述：在html中制作一个百度搜索框，要求，在搜索框里输入关键词后，点击搜索，能够跳转到百度搜索结果页面。代码结果演示：关键代码：<form action="http://www.baidu.com/baidu" target="_blank"> <input type...原创 2018-11-06 08:37:28 · 8044 阅读 · 1 评论 -
HTML+CSS第三课：表格标签的使用
知识点：表格标签、表格标签的属性、单元格的跨行与跨列、单元格属性1、表格的基本结构表格是由指定的数目的行和列组成的。单元格：表格的最小单位，一个表格由一个或多个单元格组成。行：表格是由一个或多个行堆叠而成。列：表格是由一个或多个列堆叠而成。2、表格的基本语法在HTML文档中，表格通过<table>、<tr>、<td>标签来完成...原创 2018-10-25 16:34:28 · 1215 阅读 · 1 评论 -
HTML+CSS第四课：表单标签的使用-制作注册表单
知识点：表单标签、表单元素表单在网页中应用比较广泛，如申请qq账号、电子邮箱等，用户需要首先填写注册信息，然后才能提交；通俗讲，表单就是一个将用户信息组织起来的容器，将用户填写的内容放置在表单容器中，当用户单击提交按钮的时候，表单会将数据统一发送给服务器！表单的作用：实现人机交互。 表单里的形式、种类：通过input标签实现，如输入文本信息的、密码显示为*的、点选性别的按钮、选填生日...原创 2018-10-30 08:17:23 · 3563 阅读 · 0 评论 -
HTML+CSS第二课：格式标签、图像标签、链接标签的使用
知识点：格式标签、图像标签、链接标签的使用一、格式标签格式标签用来对文本的段落进行设置，常用有<p>,<center>,<ul>,<ol>,<dl>等。使用这些标签，可以让网页显示效果看起来更接近于传统的阅读习惯。P标签：段落标签，是常用的标签之一，在显示时，段落标签中的内容将显示为一个独立的段落，阅读时更清晰。语法：<...原创 2018-10-19 16:44:50 · 2871 阅读 · 0 评论 -
HTML+CSS第八课：使用CSS布局网页——网页中块级元素与行内元素、盒子模型的理解
知识点：网页中的块级元素、行内元素、盒子模型、盒子元素的背景设置、CSS精灵。1、块级元素与行内元素在HTML代码中，我们把标签元素按默认表现分为块级元素和行内元素两种。其中块级元素默认会独占一行，而行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化。1.1 块级元素 块级元素排斥其他元素与其位于同一行，可以设定元素的宽（wi...原创 2018-11-29 09:53:20 · 1344 阅读 · 0 评论 -
HTML+CSS第八课2：利用DIV+CSS制作一个百度搜索框和按钮的无缝对接
知识点：盒子模型、CSS样式设置、form表单。网页效果要求：制作思路：1、将百度logo+搜索框+按钮，作为整体放在一个div盒子里，通过设置div来控制他们在网页中的位置2、涉及到表单，所以写一个form标签，将他们放在form标签中3、搜索功能的实现，参考资料：利用表单标签制作一个百度搜索框4、搜索框和按钮的样式，设置css属性，控制宽高、边框、背景颜色、文本颜色等...原创 2018-11-29 09:55:17 · 7090 阅读 · 0 评论 -
HTML+CSS第九课：使用CSS布局网页——盒子的定位、浮动和浮动塌陷及解决办法
知识点：理解标准文档流、盒子的定位属性、盒子的浮动属性、浮动塌陷以及清除塌陷的方法。1、盒子的定位默认情况下，盒子的排列是根据其在文档中出现的顺序，从上到下、从左到右的顺序来进行的，这种定位方式又被成为标准文档流。由于标准文档流提供的网页布局方式缺少变化，CSS中提供了更多的方式来定位元素。例如使用浮动的方式来定位，使元素脱离标准文档流的限制，使布局有更多的选择。定位的基本思想很简单，它允...原创 2018-12-08 17:08:47 · 3053 阅读 · 0 评论 -
HTML+CSS项目课3：利用DIV+CSS制作网页（世赛服装网）
用到的知识点：1、DIV+CSS布局2、相对定位、绝对定位3、CSS精灵的使用（共用背景图像，然后定位xy数值）4、浮动塌陷的清除（在父级div添加一对空的div，并对其clear:both）网页效果图：HTML代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www....原创 2018-12-24 09:47:12 · 2021 阅读 · 2 评论 -
HTML+CSS项目实践七：同一个HTML页面，在不同浏览器上的显示效果不一样！解决HTML页面的浏览器兼容问题
表象问题：同一个HTML页面，在不同浏览器上的显示效果不一样。问题分析：由于浏览器的内核不一样，每个浏览器对标签的解释都有自己的规则，因而会造成显示效果不一样，称之为浏览器不兼容。对浏览器兼容问题，一般分，HTML，Javascript兼容，CSS兼容。 其中html相关问题比较容易处理，无非是高版本浏览器用了低版本浏览器无法识别的元素，导致其不能解析，所以平时注意一点就是。 1、浏览...原创 2018-12-29 11:33:36 · 16290 阅读 · 0 评论 -
HTML+CSS项目实践六：HTML中设置文字浮在图片上方的两种方法（背景图片法、DIV+CSS定位法）
实现效果：让文字悬浮在图片上方方法一：给盒子添加一个背景图片，盒子里写文字即可。制作思路：自带背景属性的盒子，那么盒子里面的文字自然显示在图片上方。实现代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran...原创 2018-12-27 17:07:12 · 20558 阅读 · 1 评论 -
HTML+CSS第十课：常见的3种网页布局方式：表格布局、DIV+CSS布局、框架布局
知识点：网页布局的方式1、网页布局常见的页面布局方式：表格布局、DIV+CSS布局、框架布局。表格布局：用来显示较多的数据，如OA系统、ERP系统或CRM系统。（一般用在局部） DIV+CSS布局：相对来说最灵活的布局方式，完全实现内容和样式的分离。 框架布局：通常用在网站后台的设计。2、DIV+CSS布局2.1 使用DIV+CSS制作网页流程第一步：将页面在整体上...原创 2018-12-17 08:00:53 · 33410 阅读 · 2 评论 -
HTML+CSS项目实践五：使用纯CSS实现点击文字切换图片效果（不使用JS）
实现效果：点击文字，切换到对应的图片显示。如：点击文字1，切换到图片1，点击文字2，切换到图片2，点击文字3，切换到图片3。 实现思路：1、制作一个div盒子，用来做展示图片的容器。因此盒子的宽高，要和待展示的图片盒子宽高一致。2、将待展示的内容，放在同一个盒子里。通过文字触发，控制分别展示。（使用ul-li标签）3、制作按钮文字，并控制点击不同文字时，待展示的...原创 2018-12-27 09:58:08 · 8626 阅读 · 0 评论 -
HTML+CSS项目实践三：鼠标悬浮在图片上时，图片有一个简单动画效果（放大、旋转等）
知识点：CSS3 transform 属性、transition属性实现效果：效果说明：一排图片大小一致，当鼠标放在任一图片上时，图片放大并且旋转。制作思路：1、给图片添加<a>标签，利用伪类选择器实现2、设置鼠标悬浮在a标签上时，添加动画属性。3、主要用到属性：transform 属性（给图片进行变形），transition属性（过渡设置） 实现代码：...原创 2018-12-20 16:59:28 · 18972 阅读 · 1 评论