原创

网页制作有关基础知识(html)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42660771/article/details/81775792

1.初识

background-color 背景颜色

width 宽度

hright 高度

设置模型:height : 100px ;   用英文中的冒号和分号

border  边缘 边框

组合属性时 border : 1px  dotted  black ;

值1:线条粗细 ,值2:线条样式(solid 实线,dotted 虚线) ,值3:线条颜色

span 属于行标签,同时 b 和strong 标签也是行标签

特征:在同一行显示,且 行标签不能设置大小

font-size 字体大小

div标签属于 块标签,特征:独占一行

h标签 属于块标签 ,h1 ,1为编号 编号越大, 标签越小

2.相对定位

设置定位属性为相对定位  用:position : relative ;  

position 位置 定位   relative 相对的

相对定位是指相对于自己的初始位置进行的定位;

left : 100px ;

right :100px ;

top : 100px ;

bottom : 100px ;

表面意为 左右上下,其实并不然,要知道其实际意义:

是移动到 距离__100px的位置

当给同一个属性赋值多次的时候,最终效果以最后一个值为依据

3.定宽居中

定宽居中的前提是定宽,目的是实现居中

margin  页面的空白,外间距         

关于margin的3几种形式写法

margin:后面有两个值

值1:上下的外间距,值2:左右的外间距

margin:后面有三个值

值1:上   值2:左右  值3:下

margin:后面有四个值

值1:上 值2: 右 值3:下 值4:左

4.绝对定位

绝对定位 position:absolute

相对于设置了 定位属性 的父级标签进行定位,父级标签不是父标签,父标签有且只有一个挨着的那个。

5.超链接,图片,和段落

标签里面跟的内容是属性,格式为 属性="属性值"

target="_blank"  点击链接 会进入一个新的网页页面

img里面,alt里 的内容 在alt内容在图片加载不出来的时候 才会出现

p 被称为段落标签 ,一般将成段 的内容放在里面

6.属性继承

可以继承的是与字体相关的属性,子标签会继承父标签的属性

font-size 字体类型,font-color,字体颜色 等

7.固定定位

固定定位 position : fixed ;

当写 width : 100% ; 时 说明目标和父标签一样宽

标签的布局默认使用 流式布局/布局流

块标签,在流式布局中 宽为父标签body的宽,脱离了流式布局之后 宽就为内容的大小

设置字体的对齐方式 text-align : center ;

相对定位:相对自己的初识位置进行的定位

绝对定位:相对于设置了定位属性的父级标签进行的定位

固定定位:相对于html进行的定位

8.

设置背景图片的方法;background-image : url(caodi.png)

设置背景图片尺寸的时候有两个值,background-size : 1300px 500px ;   值1表示宽度,值2表示高度

注意:定位(绝对定位和固定定位)回使定宽居中失效,相对定位没事

contain 包含;合适

background-size : contain;      是自动调整图片大小,以达到适合标签大小的目的

 

图片转动

animation-name :___;  起个名字

animation-duration : 2s ;   转动周期

animation-timing-function : linear ;        linear 匀速    设置动画运行速率

animation-iteration-count : infinite;       infinite永不停止   设置动画的运动次数

四局可以合起来写: animation:__ 2s  linear   infinite ;

 

div : nth-child(2)  指的是所有div中的第二个

div : hover 是指当鼠标覆盖在div上时

div : active 是当鼠标进行点击的时候

direction 方向  指导  趋势

transform 变换,转变

rotate 旋转 循环

margin : 0 ; 去掉外间距

border-bottom 表示 只设置底部 线

list-style : none ; 设置列表的风格样式

float : left ;  表示 往哪个方向浮动

text-decoration : none ; 设置装饰

text-indent :2em ; 表示缩进两个单元格

section>img{ }  指 设置section里面的img标签的属性

边框角度是50% 为圆角

nav 为导航条

 

 

文章最后发布于: 2018-08-21 22:47:05
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览