HTML CSS简单总结

1、css 的border属性改变hr颜色小示例

<hr style="border:0;background-color:#ff0000;height:1px;margin:0;padding:0"> 
时间: 2024-10-05 21:09:29

HTML CSS简单总结的相关文章

css3 calc():css简单的数学运算-加减乘除

css3 calc():css简单的数学运算–加减乘除 多好的东西啊,不用js,一个css就解决了. .box{ border:1px solid #ddd; width:calc(100% - 100px); background:#9AC8EB; } 3栏等宽布局 .box{ margin-left:20px; width:calc(100%/3 - 20px); } .box:nth-child(3n){ margin-left:0; } 运算规则 calc()使用通用的数学运算规则,但是

Bootstrap css简单使用

http://www.bootcss.com/ 这是中文官网 这里简单的用一下基本的css: 引用基本样式: <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <td style="width: 60%;"> <a class="btn btn-info" href="java

HTML与CSS简单页面效果实例

本篇博客实现一个HTML与CSS简单页面效果实例 index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <link href="style.css" rel="stylesheet" type="t

css简单实现带箭头的边框

原文地址 https://tianshengjie.cn/artic... css简单实现带箭头的边框 普通边框 <style> .border { width: 100px; height: 50px; border: 1px solid red; } </style> <div class="border"></div> 实现由四个三角形组成的正方形 <style> .triangle { width: 0; height

css简单了解

今天主要是说一下css样式表!HTML结合他使用可以是HTML页面变得很绚丽多彩! 先简单介绍一下为什么要使用CSS(Cascading Style Sheets)层叠样式表! 1.因为CSS样式表可以定义HTML 元素如何显示 2.所有主流浏览器都支持CSS样式表 3.样式表极大地提高了工作效率 4.并且,多重样式表可以层叠为一个 那如果当同一个HTML元素被不只一个样式定义的时候,会使用哪一个样式呢? 一般而言,所有样式会根据下面的规则层叠于一个新的虚拟样式表,其中第4条拥有最高优先权. 1

利用CSS简单布局的不同组合类型

关于CSS布局页面的简单组合方式: <!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-eq

CSS 简单知识概括

CSS选择器 ID选择器 #ID{color:red} 类选择器 .class{color:blue} 属性选择器 注释:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器.在 IE6 及更低的版本中,不支持属性选择 [title]{color:green} 元素选择器 p{font-size:15px} 后代选择器 p  a{font-size:15px} 子元素选择器 p > a{background:red} 相邻兄弟选择器 h1 + p{background:yel

[CSS3] 学习笔记-HTML与CSS简单页面效果实例

一个简单的首页的设计: html文件: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="1.css"> 7 </head> 8 &

css简单实现五角星评分、点赞收藏、展示评分(半颗星、1/3颗星)

1.前言 之前做的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了很多次,每次需要再写的时候,就会翻出之前写过的代码,然后copy过来.总觉得这样的话没有进步,没有把知识放进脑袋里,所以,自己花了2个小时,把这三种类型的需求自己写了demo并做了演示,这样的话,感觉一字一字敲出来的代码,确实是到了脑袋里了.之前一直崇尚写简单的博客,也将五角星评分.点赞收藏.展示评分写成了三个简单的博客,奈何博客园要求博客要有篇幅,所以我的那三篇博客并没有上到博客园首页,但是我觉得这个方法应该让更多的小伙伴

利用jquer+css简单实现购物网站的图片增大。

在我们浏览淘宝京东等网站的时候,浏览商品的图片时,当我们把鼠标移动到图片上的时候,会让其变大,利于消费者观察,接下来我将用jQuery+css技术对其功能进行一简单实现. 第一步:创建项目,并且在webapp下建立如下文件夹. 第二步:代码编译: HTML+CSS: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here<