CSS概述（二）

一、CSS概述二、CSS的选择器（认识）三、CSS样式和属性（练习）四、重构商城首页DIV+CSS(页面布局)（重点）浮动/更改显示方式

一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用样式定义如何显示HTML元素,页面的布局(美化HTML效果) ###<3>使用方式内联样式方式:在当前的元素属性中直接设置style属性,适用性差,只能作用于当前元素. style属性是HTML元素通用的属性内部样式方式:在head标签中,使用<style>标签来设置样式,适用性强,可以同…

css概述二

四.尺寸和边框 1.尺寸属性 ①作用设置元素的宽度和高度 ②属性 width:宽度 max-width:最大宽度 min-width:最小宽度 height:高度 max-height: min-height 取值:px为单位的数字和父元素的%比注意,如果不写宽高,各个元素默认的宽高是多少? 1.块级元素不写宽,默认宽度占满父容器宽度100% 2.块级元素不写高,默认高度靠内容撑起来 3.行内元素,设置宽高无效.它的宽高靠内容撑起. 4.自带宽高属性的元素,设置宽高有效(img,table)…

xhtml和css概述

Xhtml和css概述 1.html的过渡到xhtml html与xhtml不是两种语言,它们是一种语言的不同阶段,有点类似于文言文和白话文之间的关系.因为网络技术的日新月异,html的不断改进,所以说xhtml是html的“严谨版”. 详情了解html介绍:http://baike.baidu.com/link?url=XZg9Djt-snnwAICod0SKPbXVhm7BqfTrnEUE2As9E201oL8X7mGbLp7hIsXGV5M6hkcb7gBqWY2NTF-d3dY6Za (…

前端总结·基础篇·CSS（二）视觉

前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充前端总结·基础篇·CSS(四)兼容目录一.动画(animation)(IE10+)(CSS3) 1.1 定义动画 1.2 引用动画 1.3 多个动画 1.4 更多属性二.过渡(transition)(IE10+)(CSS3) 2.1 定义首尾 2.2 应用过渡 2.3 多个过渡 2.4 更多属性三.转换(transform)(IE10+,-ms-,-webkit-,-…

css入门二-常用样式

css入门二-常用样式总结基本标签样式背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高度*/: 48px; border/*边框*/:1px solid red; font-size/*字体大小*/: 26px; text-align/*左右居中*/: center; line-height/*根据标签高度自适应垂直居中*/: 48px; font-weight/*加粗*/: bol…

{MySQL数据库初识}一数据库概述二 MySQL介绍三 MySQL的下载安装、简单应用及目录介绍四 root用户密码设置及忘记密码的解决方案五修改字符集编码六初识sql语句

MySQL数据库初识 MySQL数据库本节目录一数据库概述二 MySQL介绍三 MySQL的下载安装.简单应用及目录介绍四 root用户密码设置及忘记密码的解决方案五修改字符集编码六初识sql语句一数据库概述 1. 数据库??? 什么是数据库呢? 先来看看百度怎么说的数据库,简而言之可视为电子化的文件柜——存储电子文件的处所,用户可以对文件中的数据运行新增.截取.更新.删除等操作. 所谓“数据库”系以一定方式储存在一起.能予多个用户共享.具有尽可能小的冗余度.与应用程序…

Unit02： CSS 概述、 CSS 语法、 CSS 选择器、 CSS声明

Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- 2.内部样式:在head元素内部的style标签内写样式,这种样式…

基本CSS布局二

基本CSS布局二------基本页面布局二 /*主面板样式*/ #container { width:100%; margin:0px auto;/*主面板DIV居中*/ } /*顶部面板样式*/ #header { width:100%; height:100px; border:1px #F00 solid; } /*中间部分面板样式*/ #main { width:100%; height:800px; border:1px #F00 solid; } /*底部面板样式*/ #footer…

Web前端：1、HTML&CSS概述及结构

万维网联盟(World Wide Web Consortium)简称W3C,专门为了定义网页相关的标准而成立,如网页中的HTML.CSS.DOM.HTTP.XML等标准. 根据W3C标准,一个网页主要由三部分组成: (1)结构:HTML用于描述页面的结构 (2)表现:CSS用于控制页面中元素的样式 (3)行为:JavaScript用于响应用户操作 HTML概述全称:HyperText Markup Language(超文本标记语言),定义页面内容结构,该语言书写的代码通常会被浏览器解析执行.…

Javaweb学习笔记——（二）——————CSS概述，进入JavaScript

day02day01内容回顾 1.html操作思想 **使用标签把要操作的数据包起来,通过修改标签的属性值来是实现标签内数据样式的变化 ***<font size="5"></font> 2.图像标签 <img src="图片的路径"/> **通过html访问本地图片,使用绝对路径,目前有问题. 3.超链接标签 <a href="" target="_blank" ></a…

目录 CSS背景属性设置背景颜色 background-color 设置背景图像 background-image 设置背景重复 background-repeat 设置背景定位 background-position 设置背景关联 background-attachment 设置背景图片大小 background-size CSS三大特性继承性层叠性优先级 CSS盒子模型/框模型内边距padding 边框border 外边距margin CSS背景属性设置背景颜色 backgrou…

CSS(十二).transition的应用之CSS中心扩散

实现 css中心向两边扩散的两个核心 1.hover 之前的垂直居中 2.文字置于最顶层顺道来讲讲hover 伪元素是不支持 hover 的,不过我们可以给普通的 tag 标签添加 hover 以此来支持伪元素的 hover,例如 .div2:hover::before 顺道抬一手absolute absolute有悬浮在元素上层的作用. 实现一 css .wrap { position: relative; display: flex; align-items: center; justi…

前端之CSS（二）

一.盒子模型说到盒子模型,我们不得不提一下,W3C标准和IE浏览器是有区别的,我昨天就在写抽屉作业的时候踩过坑,建议用谷歌浏览器,并推荐一篇博文:http://www.osmn00.com/translation/213.html 在W3C盒模型中,一个块级元素的总宽度(总高度同理)按照如下的方程式计算: 总宽度 = margin_left + border_left + padding_left + width + padding_right + border_right + margin_…

如何在普清的屏上调试CSS样式二倍图背景

背景: 最近就遇到一个同事的项目,还是像平常一样小心切图,认真对像素. 一切测试都没有问题,顺利上线. 但是,上线之后,产品经理跑过来说,有BUG. BUG描述:(不认为是BUG) 前端页面上的图标是虚的. 环境:mackbook pro retina屏现象: 给了一个截图图标是虚的 BUG修复要求: 对图标进行修正,使在retina屏上图标依旧是清晰的. 分析: 到这里,做过移动端页面的都知道,这是没有双倍图呀. 修复方法: 第一步,让设计师出对应图标的双倍图第二步,使用css的medi…

CSS 笔记二（Text/Fonts/Links/Lists）

后端码农谈前端（CSS篇）第一课：CSS概述

一.从扮演浏览器开始扮演浏览器是Head First图书中很有意义的一个环节.可作者忘记了告诉我们扮演浏览器的台本.我们从这里开始. 上图是webkit内核渲染html和css的流程图.从该图我们可以知道以下几个关键信息: HTML的解析过程和CSS的解析过程是独立完成的.HTML被解析成DOM树:CSS被解析成样式规则. HTML与CSS在被解析后,会结合在一起形成视图,然后被绘制.显示. 二.导图导图是该系列文章的安排目录,一定程度上参考了王福朋先生的<学习CSS的思路>. 三.概念扫…

CSS概述<选择器总结>

概述:CSS是指层叠样式表,他是定义如何显示HTML元素,样式表通常存储在样式表中,通常存储在.css文件中,下面对css的选择器进行总结,便大家夯实基础! 1 语法规范: 每个样式规则有两个部分:选择器和样式声明…

数往知来 CSS<十二>

div+css基础一.外部样式 <p id="p2"&g…

python css概述

1. 概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style = 'key1:value1;key2:value2;' 行内式: 在标签中使用 style='xx:xxx;'单独加在某个标签上,style增加其他属性需要以分号分隔: <div style="background-color:darkgrey;height: 100px;width:10…

CSS布局(二) 盒子模型属性

盒子模型的属性宽高width/height 在CSS中,可以对任何块级元素设置显式高度. 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样: 如果指定高度小于显示内容所需高度,取决于overflow属性,需要滚动条需要设置为overflow:auto. auto 宽高和margin可以设置auto.对于块级元素来说,宽度设置为auto,则会尽可能的宽.详细来说,元素宽度=包含块宽度-元素水平外边距-元素水平边距宽度-元素水平内边距: 高度设置为auto,…

CSS入门(二)

一.组合选择器每个选择器位可以是任意基础选择器或选择器组合 1.群组选择器可以一次性控制多个选择器选择器之间用逗号(,)隔开 div,.d1,#div{ color:red; } 2.子代(后代)选择器一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器是修饰性选择器子代选择器必须为一级父子关系,后代选择器可以为一级,也可以多级父子嵌套关系子代选择器用>连接 body>div{ color:red; } 注:控制body下的div选择器后代选择器用空格连接 div .d2…

从零开始学 Web 之 CSS（二）文本、标签、特性

大家好,这里是「 Daotin的梦呓」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.文本元素 1.属性 font-size: 50px; /*文字大小*/ font-weight: 700; /*值从100-900,文字粗细,700约等于Bold,不推荐使用font-weight:bold;…

一、 JSP概述二、JSP的语法结构三、JSP内置对象

一.JSP概述###<1>概念 java服务器页面可以编写动态页面其内部是以HTML标签为主,可以在HTML标签嵌套java代码 jsp文件以.jsp为后缀 jsp本质上就是一个Servlet hello.jsp ----> tomcat---->web.xml (后缀匹配:*.jsp) ----> JspServlet ---->转译成hello_jsp.java(hello_jspSerlvet serice())的Servlet hello_jspServle…

DIV+CSS实战(二)

一.说明在DIV+CSS实战(一)中,已经把框架搭建起来了,现在就需要往框架里面添加内容了.需要实现的内容如下图: 二.头部的设计(全媒体订阅) 左侧是一张图片+标题 ,右侧是登录名和上次登录的时间 (1).标题的设计(左侧) jsp代码 <div class="divHeader"> <h1>全媒体订阅</h1> <div> <p> 欢迎您:<span class="color2">中科大…

一、JavaScript概述二、JavaScript的语法三、JavaScript的内置对象

一.JavaScript的概述###<1>JavaScript的概念又称ECMAScript,和java没有任何关系嵌入在HTML元素中的被浏览器解释运行的一种脚本语言. ###<2>特点操作方便:任何文本编辑器都可以编写,有浏览器就可以执行面向对象:内置了大量的对象脚本语言:解释执行,事先不编译,逐行执行 ###<3>作用(使用HTML动态效果) 实现客户端数据格式的验证处理浏览器的事件制作特殊动态效果(轮播图,广告设计,特效等等) ###<4…

一、HTML概述二、web相关的概念三、HTML的常用标签

一.HTML概述###<1>概念 HTML:Hypertext Markup Language,超文本标记语言,用来描述网页的一种语言. 非编程语言,由浏览器直接解释运行. ###<2>作用编写网页,显示网页数据 ###<3>特点此语言编写的文件,以html或者htm为后缀. 由一组标签组成,不区分大小写. XML:标签自定义,存储数据,传输数据 HTML:标签固定,每一个标签具有特定的含义,存储数据,传输数据标签由开始和结束标签组成,开始标签<标签名&g…

一、Linux概述二、Linux的安装三、Linux的常用命令（重点）

一.Linux概述###<1>操作系统 OS,管理和控制计算机的硬件和软件资源的计算机程序. 最基本的系统软件. 是用户和计算机交互的桥梁,是硬件和软件交互的桥梁. 操作系统:shell+内核 DOS Windows Unix Linux (开源的) 命令行图形界面命令行命令行单用户单用户.多用户多用户多用户单任务多任务多任务多任务 ###<2>Linux操作系统是用户和计算机交互的桥梁,是硬件和软件交互的桥梁. 多任务,多用户免费的,开源的 ###…

一、JDBC的概述二、通过JDBC实现对数据的CRUD操作三、封装JDBC访问数据的工具类四、通过JDBC实现登陆和注册五、防止SQL注入

一.JDBC的概述###<1>概念 JDBC:java database connection ,java数据库连接技术是java内部提供的一套操作数据库的接口(面向接口编程),实现对数据库的统一访问. ###<2>作用是连接java应用程序和数据库的一个桥梁和纽带体现了java的one write , run anywhere![](1.png) ###<3>组成 DriverManager类:驱动管理类,用于注册驱动 Connection接口:数据库连接接口,…

深入浅出CSS（二）：关于雪碧图、background-position与steps函数的三角恋情

[测试代码] HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="id=edge"> <meta name="viewport" content="width=d…

CSS（二）：选择器

一.基本选择器 1.标签选择器 HTML标签作为标签选择器的名称,例如<h1>~<h6>.<p>等. 语法: p{font-size: 16px;} p:标签选择器. font-size: 16px; 声明. font-size:属性. 16px 属性值. 示例: <!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>基本选择器&l…

【CSS概述（二）】的更多相关文章