在HTML文件中使用Link标签连接独立的Css文件 将Link标签放在head标签中 like标签是空标签，只写开始标签，不写结束标签 我们需要为like标签设置一些属性 type的值设置为text/css，通知浏览器将要加载一个css文件。 rel（relationship关联）的值设置为stylesheet，通知浏览器被关联的文件是定义页面样式的。 href属性的工作原理和A标签中相同，url地址。 这样就和css管关联了，我们设置样式就在Htcss里面设置就好...
cursor其他取值 鼠标移入 auto ：标准光标 default ：标准箭头 pointer ：手形光标 wait ：等待光标 text ：I形光标 vertical-text ：水平I形光标 no-drop ：不可拖动光标 not-allowed ：无效光标 help ：帮助光标 all-scroll ：三角方向标 move ：移动标 crosshair ：十字标Html5中标签（包括新增常用）...
一、如何让一个不定宽高的div,垂直居中？ 1、使用flex布局，只需要在盒子的父级设置如下代码即可：.className{display:flex;justify-content:center;align-items:center; } 2、使用css3transform布局: 父级盒子设置：{ position:relative;} div设置：{ transform:translate(-50%,-50%);position:ansolute;top:50%;left:50%;} 3、使用 display:table-cell 方法 父级盒...
随着 Retina 屏幕的逐渐普及，网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰，曾经一度困扰着网页开发者，好在CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢？ 什么是响应式图片？ 响应式图片是指：用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。同时，在改变输出设备类型或分辨率时，能及时加载对应类型的图片。UI前端框架最新力作！有...
前几天学习了一点html，今天团队为做项目一起学习时，又了解到了新的东西———css，通过组内队员的指导和对一些网站（三翼）的分析，发现了html和css之间联系密切。根据从网上了解的资料，发现html与css的联系如下： 1、HTML定义网页的结构，主要让页面的内容结构化、块状化！ 2、CSS控制HTML的标签，定义所需要的样式，使得结构和样式独立开来，这样使得样式和结构分离，达到了我们的初衷：内容更加清晰可读。在有了CSS之...
首先是没有进行缩放的图 进行缩放后 代码：<style type="text/css">* {margin: 0px;padding: 0px;}#i {width: 300px;height: 500px;float: left;background-color: cornflowerblue;transform: scale(0.8);-webkit-transform-origin: 0 0;}#m {float: left;background-color: aquamarine;width: 300px;height: 500px;}</style></head><body><!-- 第一块 --><p id="i">...
前言: 前端无非就是围绕标签、属性、属性值这三个词展开的.*HTML基本语法: 1. 常规标签 <标签 属性1="属性值1" 属性2="属性值2"></标签> # 一个标签可以没有属性也可以有多个属性, 属性和属性之间不分先后顺序. 2. 空标签 <标签 属性1="属性值1" 属性2="属性值2" /> # 空标签没有结束标签, 用"/"代替.*HTML标题: <h1>这是一个标题</h1> 最重要的(字体最大) <h2>这是一个标题</h...
position_fixed固定在某一个页面上<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.pg_head{height: 60px;background-color: black;color: white;position: fixed;/*position头部固定*/top :0;left:0;right:0;}.pg_body{background-color:#dddddd;height: 5000px;margin-top: 20px;}</style></head><body><!--position fixed--><div class="pg_head"> 头部</div><div class="pg_body">内...
div+css设置列表div超出部分显示...（单行文本）width:200px; //指定宽度： overflow:hidden; //将超出内容隐藏 text-overflow:ellipsis; //文本溢出时显示省略标记。 white-space:nowrap; //强制内容不换行。强制在同一行内显示所有文本，直到文本结束或者遭遇 br 元素现在的浏览器都支持text-overflow:ellipsis属性，用来实现单行文本的溢出显示省略号，但是这个属性并不支持多行文本。多行文本处理，来源于http://c7sky.com/tex...
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>*{margin: 0px;/*盒子外边距*/padding: 0px;/*盒子内边距*/}.NavigatorView {width: 100%;height: 50px;background-color:cadetblue;}.NavigatorView div{height: 50px;width: 80%;margin-left: 17%;margin-right: 17%;}.NavigatorView div ul {list-style-type: none;/*去掉ul的无标号的 点， 即 无标记 */}.NavigatorView div ul li {float: left;/*...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>旋转菜单</title> <link rel="stylesheet" href="style8.css" type="text/css"></head><body><div class="se"><h3><a href="">IT</a></h3><div><img src="imges/it.jpg" ></div> </div><div class="se"><h3><a href="">创投</a></h3><div><img src="imges/kk.jpg" ></div> </div><div class="se"><h3><a href="">探索</a></h3><div><img src=...
效果如下。 See the Pen wKvrMa by moyu (@MoYu1991) on CodePen./*-1;t--){var a=this._getParamsFromAttributes(e[t]);if(a=this._convertOldDataAttributesToNewDataAttributes(a),a.user=this._findUsernameForURL(a,e[t]),this._paramsHasRequiredAttributes(a)){var n=this._buildURL(a),r=this._buildIFrame(a,n);this._addIFrameToPage(e[t],r)}}},_findUsernameForURL:function(e,t){if("string"==typeof e.user)return e...
如何让图1中的div2移动到如图2上的位置；思路：哪些css命令能够影响盒子显示的位置呢？ relative相对定位/定位偏移量position:relative; 相对定位 a、不影响元素本身的特性； b、不使元素脱离文档流； c、如果没有定位偏移量，对元素本身没有任何影响；定位元素位置控制 top/right/bottom/left 定位元素偏移量。 absolute绝对定位/定位层级osition:absolute; 绝对定位 a、使元素完全脱离文档...
Blog的全名应该是Web log，中文意思是“网络日志”，后来缩写为Blog，而博客(Blogger)就是写Blog的人。从理解上讲，博客是“一种表达个人思想、网络链接、内容，按照时间顺序排列，并且不断更新的出版方式”。简单的说博客是一类人，这类人习惯于在网上写日记。 如何应Blog的全名应该是Web log，中文意思是“网络日志”，后来缩写为Blog，而博客(Blogger)就是写Blog的人。从理解上讲，博客是“一种表达个人思想、网络链接、内容，按...
Html&Css05：positionhtml==>结构css ==>表现js ==>行为1、定位的简介<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body{font-size: 60px;}.box1{width: 200px;height: 200px;background-color: #bfa;}.box2{width: 200px;height: 200px;ba...