16_列表、边框.html


<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>列表、边框</title>

<style type="text/css">

body,ul,div,p{

margin:0;

padding:0;

}

ul{

background:#ccc;

list-style:none outside none;

}

p{

background:#ccc;

border:8px solid pink;

}

div{

background:gold;

width:500px;

height:100px;

border-top:5px dashed blue;

border-right:10px solid green;

}

</style>

</head>

<body>

<h1>CSS列表属性(list):</h1>

<ul>

<li>list-style-image 将图象设置为列表项标志。</li>

<li>list-style-position 设置列表中列表项标志的位置。</li>

<li>list-style-type 设置列表项标志的类型。</li>

<li>开发中,通常设置用简写属性,如:</li>

</ul>

<h1>CSS控制边框属性:</h1>

<div>1.设置边框粗细 border-top-width:12px;</div>

<div>2.设置边框样式 border-top-style:solid(实线)/dashed(虚线)</div><br />

<p>

3.设置边框颜色 border-top-color:#ccc;<br />

4.设置某一边框属性的快捷方法 border-边框位置:线宽 线型 颜色;<br />

5.设置某一元素四条边框属性的简捷方式(仅限于四条边框属性完全相同) border:线宽 线型 颜色;

</p>

</body>

</html>

时间: 2024-08-06 15:51:47

16_列表、边框.html的相关文章

18-css列表-边框详解

关于列表属性的介绍 list-style:列表的图片语法: list-style:list-style-image || list-style-position || list-style-type 列表的样式:列表的图片 列表的符号位置 列表的样式 list-style:none; 不要列表的符号 CSS控制边框属性 设置边框粗细 border-top-width:12px; 设置边框的样式 border-top-style:solid[实线].deshed[虚线] 设置边框的颜色 borde

列表边框column-rule

column-rule主要是用来定义列与列之间的边框宽度.边框样式和边框颜色.简单点说,就有点类似于常用的border属性.但column-rule是不占用任何空间位置的,在列与列之间改变其宽度不会改变任何列的位置. 语法规则: column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color> 取值说明: 属性值 属性值说明 column-rule-width 类似于border-width属

css3的部分属性

1.阴影box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] 注意:inset(内阴影) 可以写在参数的第一个或最后一个,其它位置是无效的实例 正值表示在对象的底部,负值表示在对象的顶部. .boxshadow-outset{ width:100px; height:100px; box-shadow:4px 4px 6px blue,4px 4px 6px red inset; } .boxshadow-inset{ width:100p

十天精通CSS3(10)

多列布局——Columns 为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module).它主要应用在文本的多列布局方面,这种布局在报纸和杂志上都使用了几十年了,但要在Web页面上实现这样的效果还是有相当大的难度,庆幸的是,CSS3的多列布局可以轻松实现.接下来咱们一起学习多列布局相关的知识. 语法: columns:<column-width> || <column-count&

CSS3知识点整理(四)----布局样式及其他

包括CSS3多列布局样式.Flexbox伸缩布局.盒子模型等.重点介绍了Flexbox伸缩布局的各种属性用法. 一.多列布局 为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module).它主要应用在文本的多列布局方面. 1) columns 语法: columns:<column-width> || <column-count> 多列布局columns属性参数主要就两个属性

负margin在布局中的运用(*****************************************************************)

一.左右栏宽度固定,中间栏宽度自适应 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>左右栏宽度固定,中间栏宽度自适应</title> <style> body{ margin: 0; padding: 0; min-width:600px; color: #fff; font-weight:

负margin在布局中的运用

一.左右栏宽度固定,中间栏宽度自适应 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>左右栏宽度固定,中间栏宽度自适应</title> <style> body{ margin: 0; padding: 0; min-width:600px; color: #fff; font-weight:

十天精通CSS3学习笔记 part4

CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后面紧跟着是动画名称加上一对花括号"{-}",括号中就是一些不同时间段样式规则. @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } } 在一个"@keyframes"中的样式

CSS3(七)——布局样式

1.多列布局 columns:column-width||column-count 2.列间距 column-gap 3.列表边框 column-rule 4.跨列设置 column-span:all /*跨过所有列*/ 5.盒子模型 box-sizing:border-box|content-box 6.伸缩布局 display:flex;flex-direction:column|row;justify-content:flex-start|flex-end;align-items:flex