前端开发之css


<!--
页面中的组成部分
通常随便打开一个网页，有文字，图片，视频，表格，音频，表单（注册信息)

css 属性/尺寸/边框/背景

1.css的尺寸属性，就是大小
width max-width min-width
height max-height min-height

2.css的边框属性
border-style 边框风格
            none:无边框。 border-color和boder-width都将被忽略
            hidden:隐藏边框。
            dotted:点状边框。
            dashed:虚线边框。
            solid:实线边框。
            double:双线边框。两条单线与其间隔的和等于指定的border-width的值。
            groove:3D凹槽轮廓。
            ridge:3D凸槽轮廓。
            inset:3D凹边轮廓。
            outset:3D凸边轮廓。

border-color 边框颜色
border-width 边框宽度

3.内边距属性
padding-left: 20px; 左边距
padding-top: 50px;  上边距
padding-right: 100px;右边距
padding-bottom: 150px;下边距

/*复合属性*/
padding: 值； 上下左右

/*padding: 20px;*/
/*padding: 20px 40px;*/   上下 左右
/*padding: 20px 40px 60px;*/  上 左右 下
padding: 10px 20px 30px 40px; 上 右 下 左

4.css背景属性

-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>张仁国杨静结婚啦</title>
    <style type="text/css">
        .item {
            /*设置元素的宽高*/
            /*width: 300px;*/
            /*max-width: 300px;*/
            /*min-width: 300px;*/
            width: 600px;
            /*height: 400px;*/
            /**/

            /*border 边框*/

            border-style: solid;
            border-color: #f90;
            border-width: 1px;

            /*复合属性*/
            /*border: 2px solid red;*/

            /*内边距  padding*/
            padding-left: 20px;
            padding-top: 50px;
            padding-right: 100px;
            padding-bottom: 150px;

            /*复合属性*/
            /*padding: 20px;*/
            /*padding: 20px 40px;*/
            /*padding: 20px 40px 60px;*/
            padding: 10px 20px 30px 40px;

        }

    </style>
</head>
<body>
    <h1>CSS的尺寸属性 边框属性 内边距</h1>
    <hr>

    <div class="item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam consectetur corporis dolorum, earum eos et explicabo fuga harum id itaque maiores nam nobis possimus quasi ratione suscipit totam vitae?
    </div>

</body>
</html>

css背景里面精灵图.html

<!--
css sprite 精灵图 雪碧图

利用backgroundposition 设置背景图片的位置

把很多小的图片 集成到一张大图上

好处：减少网络请求数量

-->

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>精灵图</title>
    <style type="text/css">
        button {
            width: 122px;
            height: 30px;
            border: 1px solid #c1c1c1;

            background-image: url("../xxx.png");
            background-repeat: no-repeat;
            background-position: -1px -2px;

            /*background: url("") no-repeat -30px -30px;*/

        }

        a {
            width: ;
            height: ;
            background: url("") no-repeat -40px -30px;

        }

    </style>
    </head>
    <body>
    <h1>CSS 精灵图知识</h1>
    <hr>

    <!--<button>ok</button>-->
    <!--按钮-->
    <button></button>
    <br>
    <a href="http://www.qq.com"></a>
    </body>
</html>

背景

<!--
背景属性
1.背景颜色

背景图片
background-image: url("写地址");
如果元素比较大图片比较小，就会平铺

背景图片平铺设置
background-repeat: repeat;  默认值就是repeat表示平铺
可以设置为不平铺，不平铺剩下的默认为背景色
background-repeat: no-repeat;
水平平铺
background-repeat: repeat-x;
竖着平铺
background-repeat: repeat-y;

首先设置为不平铺，因为都铺满了还谈什么位置。
background-postion: 水平方向的位置 垂直方向的位置

background-postion: left top;
background-postion: left center;
background-postion: center center;

建议先写颜色，图片，repeat，postion。
background-postion: 10px 10px;  (距离左边10像素 距离右边10像素)

背景图片固定
background-attachment: fixed;

复合属性
background：#ccc url('') no-repeat 10px 10px;
-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>同志约会</title>
    <style type="text/css">
        .item {
            width: 600px;
            height: 200px;
            border: solid #f90 2px;

            background-color: #cccccc;

            /*background-image: url("写地址");*/

        }

    </style>
</head>
<body>
    <h1>背景属性</h1>
    <hr>
    <div class="item"></div>

</body>
</html>

超链接与锚点

<!--
<a href="要跳转的地址">超链接文字</a>

在新的个窗口打开
<a href="要跳转的地址" target=“_blank”>超链接文字</a>

title 鼠标放上面会显示

<a href="要跳转的地址" target=“_blank” title=“描述文字”>超链接文字</a>

还可以是图片，浏览器可以直接打开图片

下载图片加个download属性就可以了

超级链接
a元素
属性
href
target _blank /_self
title
download H5新增的

特殊方法
跳转网页
发短信
打电话
发邮件

相对路径 ./  ../
绝对路径 url 统一资源定位符，定位的是一个文件在网络上的地址，HTML，JPG，GIF。。。

统称url

特殊的相对路径 /开始的路径 表示的的网站的根目录

鼠标属性

pointer/move/no-drop

锚点
设置锚点
第一种方式：
    <a name="锚点名字”></a>
第二种方式：
    任意一个元素
    <tagname id="锚点的名字"></tagname>

跳转到指定锚点：
    <a href="#锚点名”></a>

完整URL
http：//www.baidu.com/paht/demo/contents/index.php?a=100&b=300#mao1

协议protocol http
主机名(可以是域名也可以是ip)hostname www.baidu.com
路径 path  /paht/demo/contents/
文件filename index.php
查询内容query  ?a=100&b=300
锚点 #mao1

-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>张仁国跟杨静</title>
    <style type="text/css">
        h2 {
            cursor: pointer;
            cursor: move;
        }

    </style>
</head>
<body>
   <h1>超链接</h1>
   <!--锚点-->
   <a href="#xiangzhi">他们相识</a>
   <a href="#aiqing">他们相知</a>
   <a href="#aiqing">他们相爱</a>
   <a href="#幸福">他们幸福</a>
   <a href="#很好">他们很好</a>
   <a href="#快乐">他们快乐</a>
   <hr>

   <a href="http://www.taobao.com">淘宝</a> <br>
   <a href="http://www.jd.com" target="_blank" >京东</a> <br>
   <a href="http://www.xiaomi.com" target="_blank" title="小米">小米</a> <br>
   <hr>

   <h2>鼠标属性</h2>

   <!--添加锚点-->
   <a name="xiangzhi"></a>
    <div style="height: 600px">
        <h2>他们相识</h2>

    </div>

   <a name="aiqing"></a>
    <div style="height: 600px">
        <h2>他们相知</h2>
    </div>

    <div style="height: 600px" id="aiqing">
        <h2>他们相爱</h2>
    </div>

   <div style="height: 600px">
        <h2>他们结婚</h2>
    </div>

   <div style="height: 600px">
        <h2>他们生子</h2>
    </div>

   <div style="height: 600px" id="幸福">
        <h2>他们幸福</h2>
    </div>

   <div style="height: 600px" id="快乐">
        <h2>他们快乐</h2>
    </div>

   <div style="height: 600px" id="很好">
        <h2>他们很好</h2>
    </div>

   <a href="#">返回顶部</a>

</body>
</html>

前端开发之css的更多相关文章

前端开发之css篇
一.css简介 css(Cascading Style Sheets)层叠样式表,是一种为html文档添加样式的语言,主要有两个功能:渲染和布局.使用css主要关注两个点:查找到标签,属性操作二.c ...
前端开发之CSS篇四
一.相对定位二.绝对定位三.固定定位四.z-index 前言定位有三种:1.相对定位 2.绝对定位 3.固定定位这三种定位,每种都暗藏玄机,所以要每个单独剖析. 1️⃣ 相对定位 1.三 ...
前端开发之CSS篇三
主要内容: 一.CSS布局之浮动二.清除浮动带来的问题三.margin塌陷问题和水平居中四.善用父级的的padding取代子级的margin 五.文本属性和字体 ...
前端开发之CSS篇二
主要内容: 一.CSS的继承性和层叠性二.盒模型三.padding属性四.border属性五.margin属性六.标准文档流七.行内元素和块状元素转换 1️⃣ CSS的继承性和层叠性 1 ...
前端开发之CSS入门篇
一.CSS介绍和语法二.CSS引入方式三.基本选择器四.高级选择器五.伪类选择器六.伪元素选择器 1️⃣ CSS介绍和语法 1. CSS的介绍 (1)为什么需要CSS? 使用css的目的就 ...
＃笔记＃移动前端开发之viewport
一般移动设备的浏览器都默认设置了一个 viewport ,并初始定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题.下面我们来认识几个与 viewport ...
移动前端开发之viewport,devicePixelRatio的深入理解
移动前端开发之viewport的深入理解在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...
前端开发之JavaScript篇
一.JavaScript介绍前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...
Sea.js创始人玉伯的前端开发之路
在Web应用程序的用户体验越来越被重视的今天,前端开发的地位也上升到了前所未有的高度,而随之而来的也有更多的挑战. 为了将前端开发者繁重的工作变得简单,框架应运而生.国内也不乏一些非常优秀的前端开发框 ...

随机推荐

centos7下kubernetes（6。运行应用）
Deployment 从一个例子开始 kubectl run nginx-deployment --image=nginx:1.7.9 --replicas=2 kubectl get deploym ...
Cglib动态代理实现方式
Cglib动态代理实现方式我们先通过一个demo看一下Cglib是如何实现动态代理的. 首先定义个服务类,有两个方法并且其中一个方法用final来修饰. public class PersonSer ...
Oracle会话超时退出设置
前一段时间客户打电话说自从数据库搬迁后连接数据库总是提示会话不可用,和客户沟通才知到他们连接数据库的程序是从早上连上数据库后就一直保持连接状态,一天中需要执行几次操作,由于数据库中的会话连接有超时限制 ...
ansible的模块使用说明
参考官方链接: https://docs.ansible.com/ansible/latest/user_guide/intro_adhoc.html#parallelism-and-shell-co ...
【转】怎么给javascript + div编辑框光标位置插入表情文字等？
最近刚好碰到这个问题,虽然离提出问题已经过了半年了,本着前人栽树后人乘凉的精神,还是回答一下.效果: &amp;amp;lt;img src="https://pic2.zh ...
ganache与metamask
1.其实ganache其实就相当于一个私有链ganache安装,这个是图形化界面的: 2.(testRpc跟他其实是一个用处,有一个即可,只不过testRpc是非图形化界面.要注意两者都仅运行在內存中 ...
VsCode云端版本
VsCode的云端版与客户端简直是一模一样. 官网地址为:https://coder.com/ 安装命令: docker run -t -p 127.0.0.1:8443:8443 -v " ...
AT987 高橋君
AT987 高橋君给出 \(n,\ k\) ,求 \(\displaystyle\sum_{i=0}^kC_n^k\) , \(T\) 次询问 \(T\leq10^5,\ 0\leq k\leq n ...
深入理解 Object.defineProperty 及实现数据双向绑定
Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...
express+vue+mongodb+session 实现注册登录
上个月写了一篇文章是 express+mongodb+vue 实现增删改查. 只是简单的实现了增删改查功能,那么今天是在那个基础之上做了扩展,首先实现的功能有如下: 1. 支持注册,登录功能,用户可以 ...

前端开发之css

前端开发之css的更多相关文章

随机推荐

热门专题