H5程序设计基础

最新推荐文章于 2024-07-20 08:51:01 发布

她她她_ta

最新推荐文章于 2024-07-20 08:51:01 发布

阅读量577

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/qq_42243225/article/details/100578612

版权

H5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

H5程序设计基础

HTML（超文本标记语言）

CSS

JavaScript

HTML5

CSS3

文档基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

常用标签

<!-- 标题 -->
    <h1></h1>
    <!-- 段落 -->
    <p></p>
    <!-- 图片 -->
    <img src="imgs/news.jpg"/>
    <!-- 超链接 anchor-->
    <a target="_blank" href="http://www.baidu.com">百度一下，你就知道</a>
    <!-- 列表 -->
    <!-- unordered list -->
    <ul>
        <!-- list item -->
        <li></li>
    </ul>
    <!-- ordered list-->
    <ol>
        <li></li>
    </ol>
    <!-- 布局 division-->
    <div></div>
    <span></span>
    <!-- 表单 -->
    <form action="" method="get">
        <!-- 表单元素 -->
        <p>
            用户名：<input type="text">
        </p>

CSS(层叠样式表)
使用方法

行内样式（1000）
外联样式
内部样式

基本选择器

标签选择器（1）
类选择器（class）（10）
id选择器（100）

选择器优先级

id > 类选择器 > 标签选择器

派生选择器

包含选择器（后代选择器）
子选择器
通配符选择器
群组选择器
相邻兄弟选择器 +
属性选择器

字体样式

font-size
font-style : italic/oblique;
font-weight : bold/bolder;
font-family : "宋体"

文本样式

（水平对齐方式）text-align : center / left / right;
（设置字体颜色）color : red;
（设置首行缩进）text-indent : 2em;
（行高/设置文字垂直对齐方式）line-height : 30px;
（文本修饰）text-decoration : none/underline/overline/line-through;

背景样式

background-color : #ccc;
background-image : url( );
background-repeat : no-repeat;
background-position :
background : red url() no-repeat 100px center;

列表样式

list-style : none;

超链接样式（伪类选择器）

:link 只有超链接可以用（未被访问之前）
:visited 只有超链接可以用（访问过后）
:hover 可用于任意标签（鼠标经过时）
:active（鼠标点击时）

盒模型

width
height
border : 1px solid red;
    border-top
    border-right
    border-bottom
    border-left
margin(外边距：盒子之间的距离)
    margin-top
    margin-right
    margin-bottom
    margin-left
padding(内边距：盒子边缘与内容之间的距离)
    padding:10px；四个方向一样
    padding:20px 10px；上下 / 左右
    padding: 10px 20px 30px;上 / 左右 / 下
    padding: 10px 20px 30px 40px;上右下左

display:block/inline/inline-block/none;

block : 将元素转换成块级元素
inline : 将元素转换成行内元素
inline-block : 将元素转换成行内块元素
none : 元素不显示

浮动(float)

包裹性
向上性
不重叠

定位（position）

position : fixed;(固定定位：相对于浏览器定位)
position : relative;(相对定位：相对于该元素自身所在的位置定位)
position : absolute;(绝对定位：相对于该元素有定位属性的父元素去定位，如果父元素都没定位属性，相对于body定位)
position : static;(不定位)

层叠上下文

z-index : 999;

overflow(溢出处理)

hidden（溢出隐藏）
scroll（出现滚动条）
auto（自动）

她她她_ta

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录