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标签害有很多功能,例如:将点放到元素里面、或者外面、再或者将点改成图片等等。
再做一个将点改成图片的:
→→
Css样式表【边界边框】【列表方块】的更多相关文章
- css样式表之边框
方框和边框, 边框的顺序为, 上右下左 框的width和height不包括边距的宽度, 设置多少就是多少, margin代表外边距, padding代表内边距, border是边框, 边框border ...
- HTML基础(三)——css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- 2016年10月27日--css样式表
CSS样式表 样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <met ...
- CSS样式表 选择器
1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...
- HTML静态网页 css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...
- 3月22日 html(三)css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...
- HTML——CSS样式表&布局页面
CSS样式表: 一.作用:美化网页,页面布局. 二.分类: 内联,写在body里标签style=""里面的样式,优点是控制精确,可重用性差. 内嵌,嵌在网页的head里面,可重用性 ...
- HTML静态网页(css样式表)
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...
- css样式表及属性
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...
- 【2017-03-24】CSS样式表
CSS样式表:层叠式样式表 一.样式表的分类 1.内联式 写在标记的属性位置,优先级最高,重用性最差. 格式: <div style="width:100px;height:100px ...
随机推荐
- Zabbix监控mysql performance
介绍 zabbix监控mysql性能,使用zabbix自带的mysql监控模板,可以监控以下内容OPS(增删改查).mysql慢查询数量.mysql请求\响应流量带宽 配置 新建mysql监控用户 G ...
- 设置height:100%无效的解决方法
设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...
- Prism 轻量级可扩展代码高亮库.
官方网站:http://prismjs.com/ Prism 是一个轻量级并且简单易用的 JavaScript 类库,minified 和 gzipped 压缩后只有 1.5kb 大小,即使添加语言定 ...
- thinkphp vendor
vendor('weixin.request'); 对应文件:Core\Library\Vendor\weixin\request.php import('weixin.request#class') ...
- ThinkphpCMF笔记
1.模板js,css文件__PUBLIC__ <link href="__TMPL__Public/style.css" rel="stylesheet" ...
- inline-block元素vertical-align的问题分析
先来解释下这两个标签 inline-block: 字面意思:行内块元素,相当于强制转换,把一个标签设置为行内的块元素,既有块元素的部分特性(支持width\height\maigin-top\marg ...
- linux下的ssh工具之,本地上传到linux服务器and Linux服务器文件另存为本地。非sftp工具。
首先,当你只有一个ssh工具可以连接linux,但你有想把文件在 linux 和windows(本地)直接的切换.其实可以的: 本文参考 1.将本地的文件,放到ssh远程的linux服务器上: 首先要 ...
- Backbone事件模块及其用法
事件模块Backbone.Events在Backbone中占有十分重要的位置,其他模块Model,Collection,View所有事件模块都依赖它.通过继承Events的方法来实现事件的管理,可以说 ...
- MAC下Homebrew的安装
1.Homebrew是啥东东? Homebrew的官方网站http://brew.sh/index.html上有这么一句“Homebrew installs the stuffyouneed that ...
- 通过JAVA程序测试闰年
首先简要介绍一下公历上规定的闰年:四年一闰,百年不闰,四百年再闰. 针对这一规则,简要的设计部分测试用例: 附(测试截图): 以下为该程序代码段: import javafx.application. ...