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 · 4832 阅读 · 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 · 580 阅读 · 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 · 4106 阅读 · 0 评论 -
【HTML5】网页实用技巧2:设置动画自动循环播放,鼠标移上去,停止动画播放
需要实现的效果:圆形图片,一直执行旋转的动画,鼠标移上去时,动画停止实现思路:①制作一个圆形图片,制作步骤参照:圆形图片的制作②创建动画,关键内容:@keyframes 的使用③给图片使用动画,关键属性:animation 属性的使用④给图片添加 hover 伪类选择器,鼠标移上去时,动画停止,关键属性animation-play-state:paused;实现代码:<!DOCTYPE html><html> <head> ..原创 2020-12-10 11:21:55 · 4472 阅读 · 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 · 9047 阅读 · 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 · 3953 阅读 · 1 评论 -
【HTML5】Web前端——第六课:CSS3 的变形属性、过渡属性、动画属性、多列属性
知识点:CSS3 的 2D 变形属性、 3D 变形属性、过渡属性、动画属性、多列属性先导知识:【HTML5】Web前端——第五课:CSS3新增背景属性、文本属性、盒模型属性、2D变形属性CSS3 在原来的基础上增加了变形和动画相关属性,通过这些属性,以前需要用 JavaScript 才能实现的功能,现在可以很轻松地实现。CSS3 的变形功能可以对元素进行位移、旋转、缩放、倾斜 4 种几何变换的操作;CSS3 的动画功能则是和位移、旋转、缩放、倾斜 4 种几何变换操作相结合,从而产生平滑的动画..原创 2020-12-02 21:41:35 · 2190 阅读 · 0 评论 -
【HTML5】Web前端——第五课:CSS3新增背景属性、文本属性、盒模型属性
知识点:CSS3新增背景属性、字体文本相关属性、盒模型属性、变形动画属性、多列属性。1、CSS3 新增背景属性原创 2020-11-19 09:19:11 · 496 阅读 · 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 · 458 阅读 · 0 评论 -
【HTML5】Web前端——第三课:HTML5 表单相关元素和属性
知识点:原有的表单元素及表单控件、HTML5 表单新增功能类型、HTML5 表单控件新增的属性推荐阅读:HTML+CSS第四课:表单标签的使用-制作注册表单1、原有的表单元素及表单控件表单,是页面与Web服务器交互过程中最重要的信息来源,在网页中的作用不可小视,负责获取用户填写的数据,并通过浏览器向服务器传送数据。因此,在需要与用户交互的Web页面中,表单是极为常见的。表单的作用:实现人机交互。 表单里的形式、种类:通过input标签实现,如输入文本信息的、密码显示为*的、点选性别的.原创 2020-11-05 08:14:02 · 1034 阅读 · 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 · 553 阅读 · 3 评论 -
【HTML5】Web前端开发初级下——第一课:初识HTML5、HTML5保留的常用元素
知识点:原创 2020-10-26 10:29:06 · 688 阅读 · 0 评论 -
HTML+CSS项目实践九——设置网站导航栏悬浮在网页最上面
实现原理参照:HTML+CSS项目实践六:HTML中设置文字浮在图片上方的两种方法(背景图片法、DIV+CSS定位法)原创 2020-09-25 11:00:17 · 7555 阅读 · 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 · 4334 阅读 · 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 · 2404 阅读 · 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 · 37803 阅读 · 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 · 1148 阅读 · 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 · 1256 阅读 · 0 评论 -
HTML+CSS初学者练习项目5:利用DIV+CSS制作个人CPS网站《汽车坐垫点评网》——首页
知识点:div布局、css样式引用制作效果图:网站制作思路:1、分析网站构成:本网站一共设计三个页面:首页、列表页、内容页。2、在DW中新建站点,做好网站建设准备工作(将网站要用到的图片统一放在站点文件里)。3、对于同一个网站来说,每一个页面的logo、导航栏、底部版权信息是一样的。(整个网站风格统一)4、制作网页和写css样式。5、预览网页效果,将三个网页关...原创 2019-05-12 21:56:26 · 1520 阅读 · 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 · 834 阅读 · 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 · 962 阅读 · 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 · 16428 阅读 · 1 评论 -
HTML+CSS项目实践八:同一个HTML页面,在不同电脑上的显示效果不一样!解决HTML页面针对不同分辨率的问题
表象问题:同一个HTML页面,在不同电脑上的显示效果不一样。(样式错位等)举例说明:当电脑分辨率不同时,第二张图片的样式无法完全展示。 问题分析:由于电脑屏幕分辨率不同,像素密度不同,视觉上会有差异,甚至差异很大。参考资料:百度流量统计院 分辨率使用情况:http://tongji.baidu.com/data/screen解决方案一:设定固定...原创 2018-12-29 17:22:10 · 16770 阅读 · 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 · 1736 阅读 · 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 · 950 阅读 · 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 · 4108 阅读 · 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 · 1575 阅读 · 0 评论 -
HTML+CSS第四课2:利用表单标签制作一个百度搜索框
知识点:表单<form>标签、<input />标签的使用。问题描述:在html中制作一个百度搜索框,要求,在搜索框里输入关键词后,点击搜索,能够跳转到百度搜索结果页面。代码结果演示:关键代码:<form action="http://www.baidu.com/baidu" target="_blank"> <input type...原创 2018-11-06 08:37:28 · 8087 阅读 · 1 评论 -
HTML+CSS第三课:表格标签的使用
知识点:表格标签、表格标签的属性、单元格的跨行与跨列、单元格属性1、表格的基本结构表格是由指定的数目的行和列组成的。单元格:表格的最小单位,一个表格由一个或多个单元格组成。行:表格是由一个或多个行堆叠而成。列:表格是由一个或多个列堆叠而成。2、表格的基本语法在HTML文档中,表格通过<table>、<tr>、<td>标签来完成...原创 2018-10-25 16:34:28 · 1232 阅读 · 1 评论 -
HTML+CSS第四课:表单标签的使用-制作注册表单
知识点:表单标签、表单元素表单在网页中应用比较广泛,如申请qq账号、电子邮箱等,用户需要首先填写注册信息,然后才能提交;通俗讲,表单就是一个将用户信息组织起来的容器,将用户填写的内容放置在表单容器中,当用户单击提交按钮的时候,表单会将数据统一发送给服务器!表单的作用:实现人机交互。 表单里的形式、种类:通过input标签实现,如输入文本信息的、密码显示为*的、点选性别的按钮、选填生日...原创 2018-10-30 08:17:23 · 3584 阅读 · 0 评论 -
HTML+CSS第二课:格式标签、图像标签、链接标签的使用
知识点:格式标签、图像标签、链接标签的使用一、格式标签格式标签用来对文本的段落进行设置,常用有<p>,<center>,<ul>,<ol>,<dl>等。使用这些标签,可以让网页显示效果看起来更接近于传统的阅读习惯。P标签:段落标签,是常用的标签之一,在显示时,段落标签中的内容将显示为一个独立的段落,阅读时更清晰。语法:<...原创 2018-10-19 16:44:50 · 2891 阅读 · 0 评论 -
HTML+CSS第八课:使用CSS布局网页——网页中块级元素与行内元素、盒子模型的理解
知识点:网页中的块级元素、行内元素、盒子模型、盒子元素的背景设置、CSS精灵。1、块级元素与行内元素在HTML代码中,我们把标签元素按默认表现分为块级元素和行内元素两种。其中块级元素默认会独占一行,而行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。1.1 块级元素 块级元素排斥其他元素与其位于同一行,可以设定元素的宽(wi...原创 2018-11-29 09:53:20 · 1370 阅读 · 0 评论 -
HTML+CSS第八课2:利用DIV+CSS制作一个百度搜索框和按钮的无缝对接
知识点:盒子模型、CSS样式设置、form表单。网页效果要求:制作思路:1、将百度logo+搜索框+按钮,作为整体放在一个div盒子里,通过设置div来控制他们在网页中的位置2、涉及到表单,所以写一个form标签,将他们放在form标签中3、搜索功能的实现,参考资料:利用表单标签制作一个百度搜索框4、搜索框和按钮的样式,设置css属性,控制宽高、边框、背景颜色、文本颜色等...原创 2018-11-29 09:55:17 · 7130 阅读 · 0 评论 -
HTML+CSS第九课:使用CSS布局网页——盒子的定位、浮动和浮动塌陷及解决办法
知识点:理解标准文档流、盒子的定位属性、盒子的浮动属性、浮动塌陷以及清除塌陷的方法。1、盒子的定位默认情况下,盒子的排列是根据其在文档中出现的顺序,从上到下、从左到右的顺序来进行的,这种定位方式又被成为标准文档流。由于标准文档流提供的网页布局方式缺少变化,CSS中提供了更多的方式来定位元素。例如使用浮动的方式来定位,使元素脱离标准文档流的限制,使布局有更多的选择。定位的基本思想很简单,它允...原创 2018-12-08 17:08:47 · 3064 阅读 · 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 · 2040 阅读 · 2 评论 -
HTML+CSS项目实践七:同一个HTML页面,在不同浏览器上的显示效果不一样!解决HTML页面的浏览器兼容问题
表象问题:同一个HTML页面,在不同浏览器上的显示效果不一样。问题分析:由于浏览器的内核不一样,每个浏览器对标签的解释都有自己的规则,因而会造成显示效果不一样,称之为浏览器不兼容。对浏览器兼容问题,一般分,HTML,Javascript兼容,CSS兼容。 其中html相关问题比较容易处理,无非是高版本浏览器用了低版本浏览器无法识别的元素,导致其不能解析,所以平时注意一点就是。 1、浏览...原创 2018-12-29 11:33:36 · 16352 阅读 · 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 · 20754 阅读 · 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 · 33508 阅读 · 2 评论 -
HTML+CSS项目实践五:使用纯CSS实现点击文字切换图片效果(不使用JS)
实现效果:点击文字,切换到对应的图片显示。如:点击文字1,切换到图片1,点击文字2,切换到图片2,点击文字3,切换到图片3。 实现思路:1、制作一个div盒子,用来做展示图片的容器。因此盒子的宽高,要和待展示的图片盒子宽高一致。2、将待展示的内容,放在同一个盒子里。通过文字触发,控制分别展示。(使用ul-li标签)3、制作按钮文字,并控制点击不同文字时,待展示的...原创 2018-12-27 09:58:08 · 8653 阅读 · 0 评论 -
HTML+CSS项目实践三:鼠标悬浮在图片上时,图片有一个简单动画效果(放大、旋转等)
知识点:CSS3 transform 属性、transition属性实现效果:效果说明:一排图片大小一致,当鼠标放在任一图片上时,图片放大并且旋转。制作思路:1、给图片添加<a>标签,利用伪类选择器实现2、设置鼠标悬浮在a标签上时,添加动画属性。3、主要用到属性:transform 属性(给图片进行变形),transition属性(过渡设置) 实现代码:...原创 2018-12-20 16:59:28 · 19051 阅读 · 1 评论