css基础知识学习之流

css标准/非标准流:

在网页布局中,写在前面的元素,出现在前面,后面的元素;显示在后面,这是默认布局方式,也叫标准流

非标准流:在实际开发网页中,可能需要使用非标准流的方式来布局(让某个元素脱离它本身的位置)也叫非标准流

盒子模型:

css.css文件

body{     border:1px solid red ; width: 800px; height: 1000px; margin: 0 auto;}/*这边的border里面的值顺序可以随意*/html(必须是xhtml才能生肖)margin: 0 auto;0表示上下,auto表示左右居中

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html         PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>

</title>

<link href="cssx.css" type="text/css" rel="stylesheet"/>

</head>

<body>

<img src="a.jpg" />

</body>

</html>

盒子案例

css代码

body{     border:1px solid red ;

width: 400px;

height: 500px;

margin: 0 auto;}/*这边的border里面的值顺序可以随意*/

.s1{     border:1px solid blue;

width: 50px;

height: 52px;

margin-left: 10px ;

margin-top: 10px }

.s1 img{     width: 40px;

margin-top: 5px;

margin-left: 5px; }

html文件代码

<body> <div class="s1"><img  src="d.jpg" alt=""/></div>  </body>


盒子案例代码

body{     margin: 0 auto;

width: 80px;

height: 80px;

border-left: solid 1px black;

border-top: solid 1px black; }

.s1{     border: solid 1px blue;

margin: 0 auto;

width:50px;

height: 50px;

margin-left: 50px;

margin-top: 10px; }

.s1 img{

height: 20px;

width: 20px;border:

1px solid black;

margin-top: 5px;

margin-left: 5px; }

html部分代码

 
<body> <div class="s1"><img src="f.jpg" alt=""/></div> </body>
-------------------复杂例子css代码

body{     margin: 0px;     padding: 0px; }

.div1{     border: solid 1px #b4b4b4;     width: 300px;     height: 200px;     margin-top: 50px;     margin-left: 20px; }

.abcs{     margin-top: 10px;     margin-left: 10px;     border: solid 1px red;     width: 130px;     height: 120px;     list-style-type: none;

padding: 0;

}

.abcs li{float: left;width: 30px;height: 30px; border: solid 1px orange;     margin-top: 5px;     margin-left: 0px; }

html代码

<body> <div class="div1">     <ul class="abcs">         <li ><img src="g.jpg" /></li>         <li> <img src="g.jpg" /></li>         <li> <img src="g.jpg" /></li>         <li> <img src="g.jpg" /></li>         <li> <img src="g.jpg" /></li>         <li> <img src="g.jpg" /></li>         <li> <img src="g.jpg" /></li>         <li> <img src="g.jpg" /></li>         <li> <img src="g.jpg" /></li>         <li> <img src="g.jpg" /></li>         <li> <img src="g.jpg" /></li>     </ul> </div>

时间: 2024-11-05 06:28:06

css基础知识学习之流的相关文章

〖前端开发〗HTML/CSS基础知识学习笔记

经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head

python之 前端HTML/CSS基础知识学习笔记

1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head> <title>...</title>

css基础知识学习之浮动和定位

浮动:分为左,右,清除浮动 必要性:默认情况下,div纵向排列的,比如 1 2 3 ,如果1div向右浮动,就使用float:right; 如果希望所有的元素都是横向排列,则使用左浮动 float:left; 如 1 2 3 强掉: 如果某行宽度不够,排下所有的行,则会自动换行 比如 1 2 3 4 如果有某个div过大,则会卡住别的div元素 html代码 <body> <div class="div1" id="div2">1</d

CSS基础知识学习笔记

1.css基本样式讲解 1.1 css背景 background-attachment:背景图像是否固定或者随着页面的其余部分滚动 background-color:设置元素的背景颜色 background-image:把图片设置为背景 background-position:设置背景图片的起始位置 background-repeat:设置背景图片是否及如何重复 background-size:规定背景图片的尺寸 background-orgin:规定图片的定位区域 background-cli

css基础知识学习之选择器

类选择语法如下: .类选择器名称{ 属性名:属性值;}多个属性名:属性值以分号隔开 导入到html文件的cc文件,方法如下1:在<head>..</head>之间使用<line href='path'type='text/css' rel="stylesheet"/>导入之后使用方法如下:<span class=名称>例子:css文件 .str1{ font-size: 20px; background-color: salmon; fo

java学习篇之---css基础知识(一)

css基础知识(一) 1.css样式: 加载css样式有以下四种: 1).外部样式 2).内部样式 3).行内样式 4).导入样式 <link href="layout.css" rel="stylesheet" type="text/css" /> 这种形式是把css单独写到一个css文件内,然后在源代码中以link方式链接.它的好处是不但本页可以调用,其它页面也可以调用,是最常用的一种形式. <style> h2 {

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

CSS基础知识---浮动,定位和盒模型

转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现在内容区域的周围,如果为元素添加背景,那么背景就会应用于由内容和内边距组成的区域.添加边框会在内边距的区域外边加一条线.在边框外边是外边距,外边距是透明的,一般用它来控制元素之间的间隔. 内边距,边框,和外边距是可选的,默认值为零.但是许多元素由用户代理样式表设置了外边距和内边距,我们可以将元素的m

(转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)

欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也就是指您之前做过网页,会用表格布局.如果您刚开始学习网页制作,不知道什么是表格布局及html和css,建议您先去充电,否则学习本教程会非常吃力或者根本就听不懂. 由于时间关系,本教程只讲解一些基础知识,让您从原来的表格布局跨入到web标准(div+css)布局,会使用web标准制作出常见的页面,这也达到了本教