channel_海峡

html+css学习笔记

html

table

案例一

DOCTYPE html>
<html>
<head>
	<title>优秀学生信息表格title>
head>
<body>

<table border="1" width="420" height="420">
	<caption><h3
>优秀学生信息表格h3>caption>
	<thead>
			<tr>
		<th>年级th>
		<th>姓名th>
		<th>学号th>
		<th>班级th>
	tr>
	thead>
	<tbody><tr>
		<td rowspan="2">高三td>
		<td>张三td>
		<td>110td>
		<td>三年二班td>
	tr>
	<tr>
		<td>赵四td>
		<td>120td>
		<td>三年三班td>
	tr>
		
	tbody>
	<tfoot>
			<tr>
		<td>评语td>
		<td colspan="3">你们都很优秀td>
	tr>
	tfoot>

table>
body>
html>

效果图

form

DOCTYPE html>
<html>
<head>
	<title>会员注册表单title>
head>
<body>

<h1>青春不常在，抓紧谈恋爱h1>
<hr>
<form>
昵称：<input type="text" name="" placeholder="请输入昵称">
<br><br>
性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女
<br><br>
生日：<input type="date" name="">
<br><br>
城市：<select><option>上海option><option>北京option><option>广州option><option>武汉option>select>
<br><br>
婚姻状况：<input type="radio" name="marry" checked="true">未婚 <input type="radio" name="marry">已婚 <input type="radio" name="marry">保密
<br><br>
兴趣爱好：<input type="checkbox" checked="">抽烟
<input type="checkbox" checked="" >喝酒
<input type="checkbox" >烫头
<br><br>
个人介绍：<br><br><textarea cols="50" rows="10">textarea>
<h2>我承诺h2>
<ul>
    <li>年满18，单身li>
    <li>抱着严肃的态度li>
    <li>真诚寻找另一半li>
ul>
<input type="checkbox" name=""> 我同意所有条款
<br><br>
<input type="submit" value="免费注册" >
<input type="reset" name="">
form>
body>
html>

展示

css

3-1 Css初识和css基本选择器

css 层叠样式表
给html页面标签设置样式
语法规则

选择器 {
属性名：属性值
}

引入方式	书写位置	作用范围	使用场景
内嵌式	css写在style中	当前页面	小案例
外联式式	css写单文件中，用Link引入	多个页面	项目
行辈=内式	css写在标签的style中	当前标签	配合Js使用

标签选择器

结构：标签名{css属性名：属性值}
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点
1. 标签选择器选择的是一类标签，而不是单独某一个
2. 标签选择器不管嵌套多深，都能找到对应标签

类选择器

结构：类名{css属性名：属性值}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点
1. 所有标签上的class属性的值称为类名
2. 不能以中划线或者数字开头
3. 一个标签可以有多个类名，空格隔开
4. 类名可以重复，一个类选择器可以选中多个标签

ID选择器

结构：#id属性值{css属性名：属性值}
作用：通过id属性值，找到页面中所有带有这个id属性值的标签，设置样式
注意点
1. 所有标签上都有Id属性
2. id属性值相当于身份证，在一个页面中是唯一的
3. 一个标签上只能有一个id属性值
4. 一个id选择器只能选择一个标签

类与id的区别

class类名和id属性值的区别
1. class类名相当于类目，可以重复，一个标签可以拥有多个类名
2. id属性值等于身份证号码，不可重复，一个标签只能有一个Id属性值
类选择器和id选择器的区别
1. 类选择器以.开头
2. id以#开头
实际开发情况
1. 类选择器用的多
2. id一般配合jd使用

通配符选择器

结构：*{css属性名：属性值}
作用：找到页面中所有的标签，设置样式
注意点
1. 开发中使用极少，只会在特殊情况下使用
2. 偶尔用于去除标签默认的margin和padding
3. *{margin:0;padding:0}

3-2 font字体

字体粗细

属性名:font-weight
取值:

关键字

正常	normal
加粗	boid

纯数字 100-900的整百数

正常	400
加粗	700

注意点
- 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
- 实际开发中以正常，加粗两种取值使用最多

字体样式（是否倾斜）

属性名:font-style
取值
- 正常（默认）:normal
- 倾斜:italic

常见字体系列（了解）

无衬线字体(sans-serif)
1. 特点：文字笔画粗细均匀，并且首位无装饰
2. 场景：网页中大多采用无衬线字体
3. 常见字体:黑体，Arial
衬线字体
1. 特点：文字笔画粗细不均，并且首位有笔锋装饰
2. 场景：报刊书籍中应用广泛
3. 常见字体：宋体，Times New Roman
等宽字体
1. 特点：每个字母或文字的宽度相等
2. 场景：一般用于程序代码编写，有利于代码的阅读和编写
3. 常见该系列字体：consolas fira code

字体系列 font-family

属性名：font-family
常见取值:字体1，字体2，字体3…字体系列
- 具体字体:“mICRESOFT yahei”.微软雅黑，黑体，宋体等
- 字体系列:sans-sefir sefir monospace
渲染规则
1. 从左往右按照顺序查找，如果电脑中未安装改字体，则显示下一个字体
2. 如果都不支持，根据操作系统，显示最后字体系列的默认字体
注意点:
1. 如果字体中名称存在多个单词，推荐使用引号包裹
2. 最后一项字体系列不需要引号包裹
3. 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

字体font相关属性的连写

属性名：font
取值
- font:style weight size family
顺序要求
- swsf
省略要求
- 只能省略前两个，如果省略了相当于设置了默认值
注意点L如果需要同时设置单独和连写形式
- 要么把单独的样式写在连写下面
- 要么把单独的样式写在连写里面

文本样式和css样式表

文本缩进

属性名: text-indent
取值
- 数字+px
- 数字+em（推荐，1em=当前标签的font-size的大小）

文本水平对齐方式

属性名：text-align
取值：

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

注意点
- 如果需要让文本水平居中，text-align属性给文本所在标签(文本的父元素)设置

水平居中方法总结 text-align:center

能让哪些元素水平居中
1. 文本
2. span a
3. input img
注意点
- 如果需要让以上元素水平居中，text-align:center 需要给以上元素的父元素设置

水平居中方法总结 maigin:0 auto

如果需要让div,p,h(大盒子）水平居中
- 可以通过marginL0 auto
注意点
1. 如果需要让div,p,h(大盒子）水平居中 ,直接给当前元素本身设置即可
2. margin :0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

行高

作用：控制行间距（给一行上下增加间距）
属性名：line-height
取值
- 数字+px
- 备树(当前font-size的倍数)
应用
- 让单行文本垂直居中可以设置Line-height:文字父元素的高度
- 网页精准布局时，会设置Line-height:1可以取消上下间距
行高与font连写的注意点
- 如果同时设置了行高和font连写，注意覆盖问题
- font:style-weight size/line-height family;

案例

案例一

代码

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    h1{
      text-align: center;
    }

    .time {
      color: #808080;
    }
    .info {
      text-align: center;
    }

    .author {
      color: #87ceeb;
    }

    p {
      text-indent: 2em;
    }

    .duan {
      width: 800px;
      margin: 0 auto;
      /* text-align: center; */
    }
    a{
      text-decoration: none;
    }
  style>
head>

<body>

  <div class="duan">
    <h1>《自然》评选改变科学的10个计算机代码项目h1>
    <div class="info"><span class="time">2017年1月28日14:35分 <span class="author">新浪科技span> <a href="#">收藏本文a>span>div>
    <hr>
    <p>asdsads
      asdasdsadasdasssssssssssssssasdasdasdasd的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分
    p>
    <p>asdasdsadasdasssssssssssssssasdasdasdasd的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风asdasdsadasdasssssssssssssssasdasdasdasd的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风asdasdsadasdasssssssssssssssasdasdasdasd的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分p>
    <p>asdasdsadasdasssssssssssssssasdasdasdasd的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风asdasdsadasdasssssssssssssssasdasdasdasd的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风asdasdsadasdasssssssssssssssasdasdasdasd的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风日体育体育月兔月兔月兔原图原图月兔月兔沿途风光和官方风格化规范化风格和风格和豆腐干地方给对方的风格单独发给的风格的风格的风格的风格的法国队古典风格的风格的风格p>
    <p>asdasdsadasdasssssssssssssssasdasdasdasd的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风asdasdsadasdasssssssssssssssasdasdasdasd的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风asdasdsadasdasssssssssssssssasdasdasdasd的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风格的风格的风格的风格的风格的风格的风格豆腐干豆腐干五十三东方时代法士大手动分撒旦士大夫手动分的风格风格豆腐干地方覆盖的风阿三大苏打撒旦撒大苏打萨达萨达撒旦撒撒打算大苏打大苏打撒旦阿三大苏打萨达打算阿三大阿三大阿三大阿三大阿三大p>
  div>


body>

html>

案例二

代码

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    * {
      line-height: 1;
    }
    .box {
      width: 234px;
      height: 300px;
      text-align: center;
      margin: 0 auto;
      /* background: skyblue; */
    }

    .pic {
      width: 160px;
    }
    .one {
      font-size: 14px;
      /* height: 25px; */
    }
    .two {
      font-size: 12px;
      color: #cccccc;
      /* height: 30px; */
    }
    .three {
      font-size: 14px;
      color: #ffa500;
    }
  style>
head>

<body>
  <div class="box">
    <img class="pic"
      src="D:\BaiduNetdiskDownload\资料代码\01-第一阶段\01-第一阶段\第一阶段：HTML+CSS课程资料\第一阶段：HTML+CSS课程资料\day03（CSS01-基础选择器+字体文本样式）\02-其他资料\01-课后作业\01-综合案例（必做）\02-（案例）综合案例2-卡片居中案例\images\car.jpg"
      alt="">
      <p class="one">九号平衡车p>
      <p class="two">成年人的玩具p>
      <p class="three">1999元p>
  div>
body>

html>

选择器进阶

复合选择器

后代选择器：空格

作用：根据html标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法：选择器1 选择器2 {css}
结果
- 在选择器1所找到标签的后代（儿子，孙子，重孙子）中，找到满足选择器2的标签，设置样式
注意点
- 后代包括：儿子，孙子，重孙子
- 后代选择器中，选择器与选择器之间通过空格隔开

子代选择器：>

作用：根据Html标签的嵌套关系，选择父元素子代中满足条件的元素
选择器语法:选择器1>选择器2{css}
结果
- 在选择器1所找标签的子代中，找到满足选择器2的标签，设置样式
注意点
- 子代只包括儿子
- 子代选择器中，选择器与选择器之间通过>隔开

并集选择器

作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1，选择器2 {css}
结果
- 找到选择器1和选择器2选中的标签，设置样式
注意：
- 并集选择器中的每组选择器之间通过,分隔
- 并集选择器中的每组选择器可以是基础选择器或者复合选择器
- 并集选择器中的每组选择器通常一行写一个，提高代码的可读性

交集选择器

作用：选中页面中同时满足多个选择器的标签
选择器语法：选择器1选择器2{css}
结果
- （既又原则）找到页面中既能被选择器1选中，又能背选择器2选中的标签，设置样式
注意点：
- 交集选择器中的选择器之间是紧挨着的，没有东西分割
- 交集选择器中如果有标签选择器，标签选择器必须写在最前面

伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器:hover{css}
注意
- 伪类选择器选中的元素的某种状态

总结

选择器	作用	格式	示例
后代选择器	找后代	在选择器之间通过空格分割	`.father .son {css}`
子代选择器	找儿子	选择器之间通过>分隔开	`.father>.son {css}`
并集选择器	找到多类元素	选择器之间通过,分隔	`div,p,span {css}`
交集选择器	同时满足多个选择器的元素	选择器之间紧挨着	`p.red{css}`
hover伪类选择器	选中鼠标悬停在元素上的状态	:hover	`a:hover{css}`

CSS 背景

背景颜色

属性名:background-color
属性值:
- 颜色取值：关键字，rgb表示法 rgba表示法十六进制
注意点
- 背景颜色默认值是透明:rgba(0,0,0,0) transparent
- 背景颜色不会影响盒子的大小，并且还能看清盒子的大小和位置，一般在布局中会习惯献给盒子设置背景颜色

背景图片

属性名：background-image
属性值:background-image:url(‘图片路径’)
注意点:
- 背景图片中url中可以省略引号
- 背景图片默认是在水平和垂直方向平铺的
- 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

背景平铺

属性名:background-repeat
属性值

取值	效果
repeat	(默认值)水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向(x轴)平铺
repeat-y	沿着垂直方向(y轴)平铺

背景位置

属性名: background-position
属性值: background-position:水平方向位置垂直方向位置
注意点
- 方位名词取值和坐标取值可以混合使用，第一个取值表示水平，第二个取值表示垂直

背景相关属性的连写形式

属性名:background
属性值:
- 单个属性值的合写，取值之间以空格隔开
书写顺序
- 推荐:background:color image repeat position
省略问题
- 可以按照需求省略
- 特殊情况:在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background:url()
注意点
- 如果需要设置单独的样式和连写
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面

元素显示模式与转换

块级元素

属性:display:block
显示特点
- 独占一行（一行只能显示一个）
- 宽度默认是父元素的高度，高度默认由内容撑开
- 可以设置宽高
代表标签
- div p h ul li dl dt dd form header nav footer

行内元素

属性:display:inline
显示特点:
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
代表标签
- a span b u i s strong ins em del

行内块元素

属性:display:inline-block
显示特点:
- 一行可以显示多个
- 可以设置宽高
代表标签
- input textarea button select
- 特殊情况:img 标签有行内块元素特点，但是chrome调试工具显示结果是inline

元素显示模式转换

属性	效果	使用频率
display:block	转换为块级元素	较多
display:inline-block	转换为行内块元素	较多
display:inline	转换为行内元素	较少

拓展1 HTML嵌套规范注意点

块级元素一般作为大容器，可以嵌套：文本，块级元素，行内元素，行内块元素等等
- 但是 p标签中不要嵌套div p h等块级元素
a标签内部可以嵌套任意元素
- 但是 a标签不能嵌套a标签

拓展2 居中方法总结

## CSS三大特性

继承性

特性：子元素有默认继承父元素样式的特点（子承父业）
可以继承的常见属性
- color
- font-style font-weight font-size font-family
- text-indent text-align
- line-height
注意点
- 可以通过调试工具判断样式是否可以继承

继承的应用

好处：可以在一定程度上减少代码
常见应用场景：
- 可以直接给ul设置lit-style:none 属性，从而去除列表默认的小圆点样式
- 直接给Body标签设置统一的font-size，从而统一不同浏览器默认文字大小

继承失效的特殊情况

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

a标签的color会继承失效
- 其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
h系列标签的font-size会继承失效
- 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
div的高度不能继承，但是宽度有类似于继承的效果
- 宽度属性不能继承,但是div有独占一行的特性

层叠性

特性
1. 给同一个标签设置不同的样式此时样式会层层叠加，会共同作用在标签上
2. 给同一个标签设置相同的样式此时样式会层层覆盖最终写在最后的样式会生效
注意点
1. 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

案例一

代码：

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    a {
      width: 80px;height: 50px;background-color: #ff0000;display: inline-block;text-align: center;text-decoration: none;color: #fff;text-align: center;line-height: 50px;
    }
    a:hover{
      background-color: #ffa500;
    }
  style>
head>
<body>
  <div class="box">
    <a href="">导航一a>
    <a href="">导航二a>
    <a href="">导航三a>
    <a href="">导航四a>
    <a href="">导航五a>
  div>
body>
html>

案例二

代码

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>
<style>
  a {
    width: 120px;height: 58px;
    text-decoration: none;
    display: inline-block;
    color: #fff;
    text-align: center;
    line-height: 50px;
    background-color: skyblue;
  }

 .one {
   background: url('bg1.png') ;
 }
 .one:hover{
  background: url('bg5.png') ;
 }
 .two {
   background: url('bg2.png') ;
 }
 .two:hover{
  background: url('bg6.png') ;
 }
 .three {
   background: url('bg3.png') ;
 }
 .three:hover{
  background: url('bg7.png') ;
 }
 .four {
   background: url('bg4.png') ;
 }
 .four:hover{
  background: url('bg8.png') ;
 }
style>
<body>
  <a href="" class="one">五彩导航a>
  <a href="" class="two">五彩导航a>
  <a href="" class="three">五彩导航a>
  <a href="" class="four">五彩导航a>
body>
html>

CSS三大特性

优先级的介绍

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式
- 继承<通配符选择器<标签选择器<类选择器
注意点
1. !important写在属性值的后面，分号的前面
2. !important不能提升继承的优先级，只要是继承优先级最低
3. 实际开发中不建议使用!important

权重叠加计算

场景:如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
权重叠加计算公式（每一级之间不存在进位）
- 比较规则
1. 先比较第一季数字，如果比较出来了，之后的通通不看
2. 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的通通不看
3. 如果最终数字一样，表示优先级相同，则比较层叠性（谁写在下面，谁说了算）
注意点: !important如果不是继承，则权重最高，天下第一

（拓展）权重叠加计算案例

权重计算题解题步骤
1. 先判断选择器是否能直接选中标签，如果不能直接选中就是继承，优先级最低，直接pass
2. 通过权重计算公式，判断谁权重最高
注意点
1. 实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况

chrome调式工具

pxcook的基本使用

CSS盒模型

盒子模型的介绍

盒子的概念
盒子模型
- css中规定每个盒子分别由: 内容区域 content 内边距区域 padding 边框区域 border 外边距区域 margin 这就是盒子模型

内容的宽度和高度

作用利用width和height属性默认设置是盒子内容区域的大小
属性 width/height
常见取值数字+px

边框(border) 单个属性

作用: 给设置边框粗细，边框样式，颜色效果
单个属性

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	实线solid 虚线 dashed 点线 dotted
边框颜色	border-color	颜色取值

边框连写形式

属性名:border
属性值: 单个取值连写取值之间以空格隔开如 border:10px solid red

盒子实际大小初级计算公式

盒子实际大小初级计算公式
- 盒子宽度=左边框+内容宽度+右边距
- 盒子高度=上边框+内容高度+下边距

案例

代码

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
        /* 清除标签默认的margin和padding */
        * {
      margin: 0;
      padding: 0;
    }
    .box {
      height: 40px;
      border-top: 3px solid #ff8500;
      border-bottom: 1px solid #edeef0;
    }
    .box a {
      line-height: 40px;
      display: inline-block;
      text-decoration: none;
      width: 80px;
      text-align: center;
      color: #4c4c4c;
      font-size: 12px;
    }
    .box a:hover {
      background-color: #edeef0;
      color: #ff8400;
    }
  style>
head>
<body>
  <div class="box">
    <a href="">新浪导航a><a href="">新浪导航a><a href="">新浪导航a><a href="">新浪导航a>
  div>
body>
html>

你可能感兴趣的:(html+css学习,html5)

情绪觉察日记第37天露露_e800
今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习 python
一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
铭刻于星（四十二）随风至
69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
UI学习——cell的复用和自定义cell Magnetic_h ui 学习
目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
学点心理知识，呵护孩子健康静候花开_7090
昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）研学随笔 arcgis 经验分享
我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==
【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数广龙宇一起学Rust #Rust设计模式 rust 设计模式开发语言
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
回溯 Leetcode 332 重新安排行程 mmaerd Leetcode刷题学习记录 leetcode 算法职场和发展
重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
Python数据分析与可视化实战指南 William数据分析 python python 数据
在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
2019-12-22-22:30 涓涓1016
今天是冬至，写下我的日更，是因为这两天的学习真的是能量的满满，让我看到了自己，未来另外一种可能性，也让我看到了这两年这几年的过程中我所接受那些痛苦的来源。一切的根源和痛苦都来自于人生，家庭，而你的原生家庭，你的爸爸和妈妈，是因为你这个灵魂在那一刻选择他们作为你的爸爸和妈妈来的，所以你得接受他，你得接纳他，他就是因为他的存在而给你的学习和成长带来这些痛苦，那其实是你必然要经历的这个过程，当你去接纳的
将cmd中命令输出保存为txt文本文件落难Coder Windows cmd window
最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
GitHub上克隆项目 bigbig猩猩 github
从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Python python 开发语言大数据数据分析数据挖掘
大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
人工智能时代，程序员如何保持核心竞争力？ jmoych 人工智能
随着AIGC（如chatgpt、midjourney、claude等）大语言模型接二连三的涌现，AI辅助编程工具日益普及，程序员的工作方式正在发生深刻变革。有人担心AI可能取代部分编程工作，也有人认为AI是提高效率的得力助手。面对这一趋势,程序员应该如何应对?是专注于某个领域深耕细作，还是广泛学习以适应快速变化的技术环境?又或者，我们是否应该将重点转向AI无法轻易替代的软技能？让我们一起探讨程序员
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
阶段总结反思轻争
马上就要进入10月份了，今天做一下前段时间的总结和反思。前段时间，日更、英语、健身、护肤坚持的比较好。阅读、书法坚持的不好。1.中间被迫停更半个多月，其余时间一直在坚持日更挑战。偶尔也有不想写的时候，就做一下摘抄。因为阅读（输入）没跟上来，所以写作（输出）质量有待进一步加强。2.英语做到了一周至少学习5天，每次不少于30分钟，但是小班课没有跟上更新速度，下一步要争取利用零碎时间补听小班课。3.减肥
ARM驱动学习之基础小知识 JT灬新一 ARM 嵌入式 arm开发学习
ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板
ARM驱动学习之5 LEDS驱动 JT灬新一嵌入式 C 底层 arm开发学习单片机
ARM驱动学习之5LEDS驱动知识点：•linuxGPIO申请函数和赋值函数–gpio_request–gpio_set_value•三星平台配置GPIO函数–s3c_gpio_cfgpin•GPIO配置输出模式的宏变量–S3C_GPIO_OUTPUT注意点：DRIVER_NAME和DEVICE_NAME匹配。实现步骤：1.加入需要的头文件：//Linux平台的gpio头文件#include//三
ARM驱动学习之4小结 JT灬新一嵌入式 C++arm开发学习 linux
ARM驱动学习之4小结#include#include#include#include#include#defineDEVICE_NAME"hello_ctl123"MODULE_LICENSE("DualBSD/GPL");MODULE_AUTHOR("TOPEET");staticlonghello_ioctl(structfile*file,unsignedintcmd,unsignedlo
展现思维导图魅力，不断挖掘人生宝藏思维导图讲师Mandy
第13期最强思维导图训练营已经结束一周了，但是我依旧是感觉所有学员还在努力的学习，这些学员中有教师、学生、白领、公务员、宝妈等等，只要你努力，只要你想改变自己，任何行业，任何岗位都可以参与进来，28天足以让你见成效，在这28天中，我们的学员不仅仅是收获了一枚毕业证，最重要的是让自己的思维方式得到升级，今天的你为自己投资，明天的你就会感谢你今天的付出，我们来听一听来自13期最强思维导图训练营优秀学员
2019-3-23晨间日记红红火火小耳朵
今天是什么日子起床：7点40就寝：23点半天气：有太阳，不过一会儿出来一会儿进去特别清爽的凉意，还蛮舒服的心情：小激动要给女朋友过生日啦纪念日：田田女士过生日任务清单昨日完成的任务，最重要的三件事：1.英语一对一2.运动计划3.认真护肤习惯养成：调整状态周目标·完成进度英语七天打卡（5/7）轻课阅读（87/180）音标课（25/30）读书（福尔摩斯一章）学习·信息·阅读#英语课#Cookingte
【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面一个射手座的程序媛程序员华为od 面试职场和发展
最后的话最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！资料预览给大家整理的视频资料：给大家整理的电子书资料：如果本文对你有帮助，欢迎点赞、收藏、转发给朋友，让我有持续创作的动力！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以点击这里获
教育用心灵温暖心灵
@陈春丽长期学习班冯倩。今天一早就听到说高职合并，取消中专教育的教育信息。感觉是虽然知道，再听还是吓一跳。国家重视职业教育为何还要取消中专技术学校的教育？再听高中就要进行技术教育了，一部分人学习好继续努力学习考大学，一部分人在高中就可以进行职业教育接受职业教育了还要中专技术教育学校干什么呢！a有些职业教育学校转型升级快，不是孩子上完给找工作，而是学校帮孩子创业，我觉得是不错的方向！新闻新你得实时更
数字里的世界17期：2021年全球10大顶级数据中心，中国移动榜首张三叨
你知道吗？2016年，全球的数据中心共计用电4160亿千瓦时，比整个英国的发电量还多40％！前言每天，我们都会创造超过250万TB的数据。并且随着物联网（IOT）的不断普及，这一数据将持续增长。如此庞大的数据被存储在被称为“数据中心”的专用设施中。虽然最早的数据中心建于20世纪40年代，但直到1997-2000年的互联网泡沫期间才逐渐成为主流。当前人类的技术，比如人工智能和机器学习，已经将我们推向
学习“论语”-第59天春峰轩
12.14子张问政。子曰：“居之无倦，行之以忠。”子张问为政之道。孔子说：“在位尽职不懈怠，执行政令要忠诚。”12.15子曰：“博学于文，约之以礼，亦可以弗畔矣夫！”孔子说：“君子广泛地学习文献，并且用礼节约束自己，也就不会离经叛道了。”12.16子曰：“君子成人之美，不成人之恶。小人反是。”孔子说：“君子成全别人的好事，而不助长别人的坏处。小人则与此相反行事。”知识点:“成人之美，不成人之恶”贯
nosql数据库技术与应用知识点皆过客，揽星河 NoSQL nosql 数据库大数据数据分析数据结构非关系型数据库
Nosql知识回顾大数据处理流程数据采集(flume、爬虫、传感器)数据存储(本门课程NoSQL所处的阶段)Hdfs、MongoDB、HBase等数据清洗(入仓)Hive等数据处理、分析(Spark、Flink等)数据可视化数据挖掘、机器学习应用(Python、SparkMLlib等)大数据时代存储的挑战(三高)高并发(同一时间很多人访问)高扩展(要求随时根据需求扩展存储)高效率(要求读写速度快)
HttpClient 4.3与4.3版本以下版本比较 spjich java httpclient
网上利用java发送http请求的代码很多，一搜一大把，有的利用的是java.net.*下的HttpURLConnection，有的用httpclient，而且发送的代码也分门别类。今天我们主要来说的是利用httpclient发送请求。 httpclient又可分为 httpclient3.x httpclient4.x到httpclient4.3以下 httpclient4.3
Essential Studio Enterprise Edition 2015 v1新功能体验 Axiba .net
概述：Essential Studio已全线升级至2015 v1版本了！新版本为JavaScript和ASP.NET MVC添加了新的文件资源管理器控件，还有其他一些控件功能升级，精彩不容错过，让我们一起来看看吧！ syncfusion公司是世界领先的Windows开发组件提供商，该公司正式对外发布Essential Studio Enterprise Edition 2015 v1版本。新版本
[宇宙与天文]微波背景辐射值与地球温度 comsci 背景
宇宙这个庞大,无边无际的空间是否存在某种确定的,变化的温度呢? 如果宇宙微波背景辐射值是表示宇宙空间温度的参数之一,那么测量这些数值,并观测周围的恒星能量输出值,我们是否获得地球的长期气候变化的情况呢? &nbs
lvs-server 男人50 server
#!/bin/bash # # LVS script for VS/DR # #./etc/rc.d/init.d/functions # VIP=10.10.6.252 RIP1=10.10.6.101 RIP2=10.10.6.13 PORT=80 case $1 in start) /sbin/ifconfig eth2:0 $VIP broadca
java的WebCollector爬虫框架 oloz 爬虫
WebCollector主页： https://github.com/CrawlScript/WebCollector 下载：webcollector-版本号-bin.zip将解压后文件夹中的所有jar包添加到工程既可。接下来看demo package org.spider.myspider; import cn.edu.hfut.dmic.webcollector.cra
jQuery append 与 after 的区别小猪猪08
1、after函数定义和用法： after() 方法在被选元素后插入指定的内容。语法： $(selector).after(content) 实例： <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></scr
mysql知识充电香水浓 mysql
索引索引是在存储引擎中实现的，因此每种存储引擎的索引都不一定完全相同，并且每种存储引擎也不一定支持所有索引类型。根据存储引擎定义每个表的最大索引数和最大索引长度。所有存储引擎支持每个表至少16个索引，总索引长度至少为256字节。大多数存储引擎有更高的限制。MYSQL中索引的存储类型有两种：BTREE和HASH，具体和表的存储引擎相关； MYISAM和InnoDB存储引擎
我的架构经验系列文章索引 agevs 架构
下面是一些个人架构上的总结，本来想只在公司内部进行共享的，因此内容写的口语化一点，也没什么图示，所有内容没有查任何资料是脑子里面的东西吐出来的因此可能会不准确不全，希望抛砖引玉，大家互相讨论。要注意，我这些文章是一个总体的架构经验不针对具体的语言和平台，因此也不一定是适用所有的语言和平台的。（内容是前几天写的，现附上索引）前端架构 http://www.
Android so lib库远程http下载和动态注册 aijuans andorid
一、背景在开发Android应用程序的实现，有时候需要引入第三方so lib库，但第三方so库比较大，例如开源第三方播放组件ffmpeg库, 如果直接打包的apk包里面, 整个应用程序会大很多.经过查阅资料和实验，发现通过远程下载so文件，然后再动态注册so文件时可行的。主要需要解决下载so文件存放位置以及文件读写权限问题。二、主要
linux中svn配置出错 conf/svnserve.conf:12: Option expected 解决方法 baalwolf option
在客户端访问subversion版本库时出现这个错误： svnserve.conf:12: Option expected 为什么会出现这个错误呢，就是因为subversion读取配置文件svnserve.conf时，无法识别有前置空格的配置文件，如### This file controls the configuration of the svnserve daemon, if you##
MongoDB的连接池和连接管理 BigCat2013 mongodb
在关系型数据库中，我们总是需要关闭使用的数据库连接，不然大量的创建连接会导致资源的浪费甚至于数据库宕机。这篇文章主要想解释一下mongoDB的连接池以及连接管理机制，如果正对此有疑惑的朋友可以看一下。通常我们习惯于new 一个connection并且通常在finally语句中调用connection的close()方法将其关闭。正巧，mongoDB中当我们new一个Mongo的时候，会发现它也
AngularJS使用Socket.IO bijian1013 JavaScript AngularJS Socket.IO
目前，web应用普遍被要求是实时web应用，即服务端的数据更新之后，应用能立即更新。以前使用的技术（例如polling）存在一些局限性，而且有时我们需要在客户端打开一个socket，然后进行通信。 Socket.IO(http://socket.io/)是一个非常优秀的库，它可以帮你实
[Maven学习笔记四]Maven依赖特性 bit1129 maven
三个模块为了说明问题，以用户登陆小web应用为例。通常一个web应用分为三个模块，模型和数据持久化层user-core, 业务逻辑层user-service以及web展现层user-web， user-service依赖于user-core user-web依赖于user-core和user-service 依赖作用范围 Maven的dependency定义
【Akka一】Akka入门 bit1129 akka
什么是Akka Message-Driven Runtime is the Foundation to Reactive Applications In Akka, your business logic is driven through message-based communication patterns that are independent of physical locatio
zabbix_api之perl语言写法 ronin47 zabbix_api之perl
zabbix_api网上比较多的写法是python或curl。上次我用java－－http://bossr.iteye.com/blog/2195679，这次用perl。for example: #!/usr/bin/perl use 5.010 ; use strict ; use warnings ; use JSON :: RPC :: Client ; use
比优衣库跟牛掰的视频流出了，兄弟连Linux运维工程师课堂实录，更加刺激，更加实在！ brotherlamp linux运维工程师 linux运维工程师教程 linux运维工程师视频 linux运维工程师资料 linux运维工程师自学
比优衣库跟牛掰的视频流出了，兄弟连Linux运维工程师课堂实录，更加刺激，更加实在！ ----------------------------------------------------- 兄弟连Linux运维工程师课堂实录-计算机基础-1-课程体系介绍1 链接：http://pan.baidu.com/s/1i3GQtGL 密码：bl65 兄弟连Lin
bitmap求哈密顿距离-给定N（1<=N<=100000）个五维的点A(x1,x2,x3,x4,x5)，求两个点X(x1,x2,x3,x4,x5)和Y( bylijinnan java
import java.util.Random; /** * 题目： * 给定N（1<=N<=100000）个五维的点A(x1,x2,x3,x4,x5)，求两个点X(x1,x2,x3,x4,x5)和Y(y1,y2,y3,y4,y5)， * 使得他们的哈密顿距离（d=|x1-y1| + |x2-y2| + |x3-y3| + |x4-y4| + |x5-y5|）最大
map的三种遍历方法 chicony map
package com.test; import java.util.Collection; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Set; public class TestMap { public static v
Linux安装mysql的一些坑 chenchao051 linux
1、mysql不建议在root用户下运行 2、出现服务启动不了，111错误，注意要用chown来赋予权限，我在root用户下装的mysql，我就把usr/share/mysql/mysql.server复制到/etc/init.d/mysqld, (同时把my-huge.cnf复制/etc/my.cnf) chown -R cc /etc/init.d/mysql
Sublime Text 3 配置 daizj 配置 Sublime Text
Sublime Text 3 配置解释(默认){// 设置主题文件“color_scheme”: “Packages/Color Scheme – Default/Monokai.tmTheme”,// 设置字体和大小“font_face”: “Consolas”,“font_size”: 12,// 字体选项：no_bold不显示粗体字，no_italic不显示斜体字，no_antialias和
MySQL server has gone away 问题的解决方法 dcj3sjt126com SQL Server
MySQL server has gone away 问题解决方法，需要的朋友可以参考下。应用程序（比如PHP）长时间的执行批量的MYSQL语句。执行一个SQL，但SQL语句过大或者语句中含有BLOB或者longblob字段。比如，图片数据的处理。都容易引起MySQL server has gone away。今天遇到类似的情景，MySQL只是冷冷的说：MySQL server h
javascript/dom:固定居中效果 dcj3sjt126com JavaScript
<!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&
使用 Spring 2.5 注释驱动的 IoC 功能 e200702084 spring bean 配置管理 IOC Office
使用 Spring 2.5 注释驱动的 IoC 功能 developerWorks 文档选项将打印机的版面设置成横向打印模式打印本页将此页作为电子邮件发送将此页作为电子邮件发送级别：初级陈雄华 ([email protected]), 技术总监, 宝宝淘网络科技有限公司 2008 年 2 月 28 日 &nb
MongoDB常用操作命令 geeksun mongodb
1. 基本操作 db.AddUser(username,password) 添加用户 db.auth(usrename,password) 设置数据库连接验证 db.cloneDataBase(fromhost)
php写守护进程（Daemon） hongtoushizi PHP
转载自： http://blog.csdn.net/tengzhaorong/article/details/9764655 守护进程（Daemon）是运行在后台的一种特殊进程。它独立于控制终端并且周期性地执行某种任务或等待处理某些发生的事件。守护进程是一种很有用的进程。php也可以实现守护进程的功能。 1、基本概念 &nbs
spring整合mybatis,关于注入Dao对象出错问题 jonsvien DAO spring bean mybatis prototype
今天在公司测试功能时发现一问题：先进行代码说明： 1，controller配置了Scope="prototype"（表明每一次请求都是原子型） @resource/@autowired service对象都可以（两种注解都可以）。 2，service 配置了Scope="prototype"（表明每一次请求都是原子型）
对象关系行为模式之标识映射 home198979 PHP 架构企业应用对象关系标识映射
HELLO!架构一、概念 identity Map:通过在映射中保存每个已经加载的对象，确保每个对象只加载一次，当要访问对象的时候，通过映射来查找它们。其实在数据源架构模式之数据映射器代码中有提及到标识映射，Mapper类的getFromMap方法就是实现标识映射的实现。二、为什么要使用标识映射？在数据源架构模式之数据映射器中 //c
Linux下hosts文件详解 pda158 linux
　1、主机名：　　无论在局域网还是INTERNET上，每台主机都有一个IP地址，是为了区分此台主机和彼台主机，也就是说IP地址就是主机的门牌号。　　公网：IP地址不方便记忆，所以又有了域名。域名只是在公网（INtERNET)中存在，每个域名都对应一个IP地址，但一个IP地址可有对应多个域名。　　局域网：每台机器都有一个主机名，用于主机与主机之间的便于区分，就可以为每台机器设置主机
nginx配置文件粗解 spjich java nginx
#运行用户#user nobody;#启动进程,通常设置成和cpu的数量相等worker_processes 2;#全局错误日志及PID文件#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log inf
数学函数 w54653520 java
public class S { // 传入两个整数，进行比较，返回两个数中的最大值的方法。 public int get( int num1, int nu

html+css学习笔记

html

table

form

css

3-1 Css初识和css基本选择器

标签选择器

类选择器

ID选择器

类与id的区别

通配符选择器

3-2 font字体

字体大小

字体粗细

字体样式（是否倾斜）

常见字体系列（了解）

字体系列 font-family

字体font相关属性的连写

文本样式和css样式表

文本缩进

文本水平对齐方式

水平居中方法总结 text-align:center

水平居中方法总结 maigin:0 auto

行高

案例

案例一

案例二

选择器进阶

复合选择器

后代选择器：空格

子代选择器：>

并集选择器

交集选择器

伪类选择器

总结

CSS 背景

背景颜色

背景图片

背景平铺

背景位置

背景相关属性的连写形式

元素显示模式与转换

块级元素

行内元素

行内块元素

元素显示模式转换

拓展1 HTML嵌套规范注意点

拓展2 居中方法总结

继承性

继承的应用

继承失效的特殊情况

层叠性

案例一

案例二

CSS三大特性

优先级的介绍

权重叠加计算

（拓展）权重叠加计算案例

chrome调式工具

pxcook的基本使用

CSS盒模型

盒子模型的介绍

内容的宽度和高度

边框(border) 单个属性

边框连写形式

盒子实际大小初级计算公式

案例

你可能感兴趣的:(html+css学习,html5)