美文网首页java学习
NO.55 HTML-CSS案例

NO.55 HTML-CSS案例

作者: smallnumber | 来源:发表于2017-08-25 23:01 被阅读0次

1.背景图相关

小代码:

效果:


2.文本样式

小代码:

效果:


3.开发一个网页----第一阶段

html网页代码:

代码片段1 代码片段2

css代码:

效果:

选择器的优先级

1)选择器的权重

·元素选择器: 1

·类选择器: 10

·ID选择器: 100

2)案例中的情况

.content>div : 10+1

.data : 10

.content>.data : 10+10


4.定位

什么是定位?

定位用来解决元素的排列(摆放)问题。

用定位可以随心所欲的摆放元素。

定位的分类

1)默认的定位

块元素上下排列,行内元素左右排列。

这种默认的规则称之为默认定位,也叫流定位。

流:元素有序排列而形成的队伍。

2)特殊的定位

浮动定位:通常用来解决块元素左右排列问题。

相对定位:让元素以自己为目标,产生小的偏移。

绝对定位:让元素以父辈为目标,产生大的偏移。

固定定位:让元素以窗口为目标,产生大的偏移。

后三种定位十分相似。

5.浮动定位

1)简介

作用:通常用来解决块元素左右排列的问题.

特点:浮动的元素会离队(流)

分类:左,右浮动

步骤:1)元素离队 2)后者前进 3)元素去左/右

2)右浮动

可以让块按照倒序左右排列

3)左浮动

可以让块按照正序左右排列

4)如何消除浮动影响

代码实现:

相关文章

  • NO.55 HTML-CSS案例

    1.背景图相关 小代码: 效果: 2.文本样式 小代码: 效果: 3.开发一个网页----第一阶段 html网页代...

  • HTML-CSS布局-4

    HTML-CSS布局相关元素小心得 在这里分享给大家一些HTML-CSS的相关知识,供新人学习,老人查阅,共勉。-...

  • 初探盒模型

    原文链接:http://learn.shayhowe.com/html-css/opening-the-box-m...

  • 《李戡戡乱记》

    NO.55 I have never let my schooling interfere with my edu...

  • Day01

    html-css 一.git的配备 1.安装Git-2.17.1.2-32-bit (git软件) typora-...

  • HTML-CSS

    一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂...

  • html-css

    目录 Day01标签行元素 Day02表单元素css选择器伪类选择符行内元素块元素表格 Day03文本相关属性列表...

  • html-css

    1.编辑宽、高时,根据需要转换为块、行内元素; 1).设置行高:块 2)宽:块或行内元素 3).两者:块 2.文字...

  • HTML-CSS

  • day02

    今天学了什么 1.创建文件用于说明HTML-CSS 1.1 01常用的html标签 1.2 02css-htm...

网友评论

    本文标题:NO.55 HTML-CSS案例

    本文链接:https://www.haomeiwen.com/subject/kispdxtx.html