Css样式表【边界边框】【列表方块】

一、如何给div加边框?【边界边框】

我们先做一个整个边框,并附加成绿色的边框。

①使用属性border进行设置。

②也可以单独更改某个边的边框线的颜色,利用border属性更改。

如果将div中的长宽的值设置为0,那么整个div就全都是边框了。

③如果做倒三角?

当然,我们只要调整div中边框的颜色就和像素可以做出我们想要的形状。

            #a1{
                width: 0px;
                height: 0px;
                border-top: 100px solid darkslategray;
                border-bottom: 100px solid yellowgreen;
                border-left: 100px solid brown;
                border-right: 100px solid black;

            }

这样就形成了四个对等的三角形,并附有不同的颜色,那么将其中三个的颜色值改变为白色,就是我们想要的三角形了。



二、如何去掉列表前面的数字或点?【列表方块】

1、列表方块

利用list标签去掉列表中前面的点的效果

#lie{
                list-style: none;
            }

→→

当然,list-style标签害有很多功能,例如:将点放到元素里面、或者外面、再或者将点改成图片等等。

再做一个将点改成图片的:

→→

时间: 2024-10-11 00:14:56

Css样式表【边界边框】【列表方块】的相关文章

css样式表之边框

方框和边框, 边框的顺序为, 上右下左 框的width和height不包括边距的宽度, 设置多少就是多少, margin代表外边距, padding代表内边距, border是边框, 边框border的属性还有style, background-color, 单独写一个color是指的框内文本的颜色边距可以分别设置, 顺序为上右下左顺时针方向 p.inset {border-style: inset}p.outset {border-style: outset}inset和outset分别表示内

CSS入门(css简介与样式汇总、CSS的使用方式、CSS样式表的特征、CSS基础选择器和复杂选择器、边框阴影)

一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 CSS :构建HTML元素的样式 样式汇总: color:red 字体颜色 font-size:字体大小 font-family:字体样式 background-color 背景颜色 width:宽度 height:高度 字体使用实例(样式) font-family:字体的种类 font-size:字

网站开发综合技术 第二部分 CSS样式表

第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里边. <style type= "

HTML基础(三)——css样式表

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css"> p  

HTML静态网页(css样式表)美化

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p >内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css"> p   //格式对p标签起作用 { 样式: } </sty

2016年10月27日--css样式表

CSS样式表 样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <meta charset="UTF-8"> <title>css内嵌样式</title> </head> <body> <style type="text/css"> #div{width:100px;heig

【3-24】css样式表分类、选择器、样式属性、格式布局

一.css样式表分类: (一)内联样式表:代码写在标签内的样式表  控制精确 代码重用性差  优先级最高 格式:<p style="样式属性">内容</p> <div style="text-decoration:line-through;">第四格第三元</div> (二)内嵌样式表:将代码写在标签<style type="text/css"></style>之间,此标签一

3.22课&#183;&#183;&#183;&#183;&#183;&#183;&#183;&#183;&#183;CSS样式表

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css">

HTML静态网页(css样式表)

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css">

CSS样式表--基础知识

第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里边. <style type= "