网页设计——7.css的入门
css的介绍
div+css的设计:
什么是div?
理解示意图：
实例操作：
这里就要用到div+css的布局操作
先写一个html文件，见下图：
<html>
<head>
<meta charset="utf-8">
<title>css的演示</title>
<!-- 引入案例八.css文件-->
<link href="案例八.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="style1">
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
</div>
</body>
</html>
这里的代码非常的简洁易懂。
之后写css文件，取名叫案例八.css ，与html文件中的导入css文件名一致，
.style1
{
width:200px;
height:200px;
background-color:#ffffff;
border:1px solid red;
margin-left:100px;
}
.style1 table
{
border:10px solid yellow;
width:180px;
height:180px;
margin:0 auto;
}
.style1 table td
{
border:1px solid green;
text-align:center;
}
这里要特别说明一下：css有类选择器，id选择器，父子选择器
(1)类选择器
有“."开头的取名是类选择器，用的时候在div里面加入属性class="类选择器名"，例如css中的".style1"
(2)父子选择器
通过依据元素在其位置的上下文关系来定义样式，例如css中的“.style1 table” ".style1 table td"
(3)id选择器
以 "#" 开头定义的选择器，这里没有用到，使用的时候要在div中添加属性 id="id选择器名"
网页设计——7.css的入门的更多相关文章
- 网页设计（CSS&JS）
实验一 简单静态网页设计 一. 实验目的: 复习使用记事本编辑网页的方法. 熟悉不同表单控件类型的应用. 练习使用记事本在网页中添加表单与表单元素. 二. 实验内容: 根据提供的素材设计在线调查问卷 ...
- HTML学习笔记——标准网页设计+使用CSS、Javascript
一.标准网页设计 1.标准网页概述: 标准网页设计要遵循,内容与表现相分离. 内容 + 表现 = 页面 --- 即 :XHTML + CSS = PAGE 内容与变现相分离,也就是内容使用HT ...
- 关于网页设计的css+html相对定位和决定定位的理解
css中有很多定位,其中最重要的是相对定位和绝对定位: 定位很重要,不搞好,网页就会很乱,显示的完全不是自己想要的效果,自己必须掌握: 首先说一个重要的结论:绝对定位,是不占位置的,总是相对离自己最近 ...
- 网页设计简史看设计&代码“隔膜”
本文来自网易云社区 作者:马宝 设计与代码之间隔膜所在?既然你诚心诚意地问了,我就大发慈悲地告诉你.为了防止地球被破坏,为了维护世界的和平,为了贯彻爱与真实的邪恶~,我是穿梭在前端与设计之间爱与美丽的 ...
- HTML&CSS精选笔记_HTML与CSS网页设计概述
HTML与CSS网页设计概述 Web基本概念 认识网页 网页主要由文字.图像和超链接等元素构成.当然,除了这些元素,网页中还可以包含音频.视频以及Flash等. 名词解释 Internet网络 就是通 ...
- 新编html网页设计从入门到精通 (龙马工作室) pdf扫描版
新编html网页设计从入门到精通共分为21章,全面系统地讲解了html的发展历史及4.0版的新特性.基本概念.设计原则.文件结构.文件属性标记.用格式标记进行页面排版.使用图像装饰页面.超链接的使用. ...
- HTML 5+CSS 3网页设计经典范例 (李俊民,黄盛奎) 随书光盘
<html 5+css 3网页设计经典范例(附cd光盘1张)>共分为18章,涵盖了html 5和css3中各方面的技术知识.主要内容包括html 5概述.html 5与html 4的区别. ...
- CSS+DIV网页样式布局实战从入门到精通 中文pdf扫描版
CSS+DIV网页样式布局实战从入门到精通通过精选案例引导读者深入学习,系统地介绍了利用CSS和DIV进行网页样式布局的相关知识和操作方法. 全书共21章.第1-5章主要介绍网页样式布局的基础知识,包 ...
- 网页设计与开发——HTML、CSS、JavaScript (王津涛) pdf扫描版
网页设计与开发——html.css.javascript从网页制作实际出发,除了详细地介绍html页面制作.css样式控制和javascript动态程序之外,还介绍了html 5.全书共分15章,各章 ...
随机推荐
- Java项目打包方式分析
[TOC] 概述 在项目实践过程中,有个需求需要做一个引擎能执行指定jar包的指定main方法. 起初我们以一个简单的spring-boot项目进行测试,使用spring-boot-maven-plu ...
- Appium python自动化测试系列之混合app实战（十一）
12.1 什么是混合App 12.1.1 混合app定义 什么是混合app,其实这个不言而喻,我们的app正常来说应该都是native的,但是实际工作中却不是,反正种种原因我们的app会有native ...
- 如何用php写app接口[原创]
人生就如一列永不停止的列车,no one knows when or where to stop.总有那些美好,值得永远怀念.也总有那些希望,值得你无怨无悔的付出,追逐.去年年底带着女儿一起坐火车会湖 ...
- C语言程序内存布局
C语言程序内存布局 如有转载,请注明出处:http://blog.csdn.net/embedded_sky/article/details/44457453 作者:super_bert@csdn 一 ...
- 原生JS实现图片放大镜插件
前 言 我们大家经常逛各种电商类的网站,商品的细节就需要用到放大镜,这个大家一定不陌生,今天我们就做一个图片放大镜的插件,来看看图片是如何被放大的…… 先看一下我们要是实现的最终效果是怎么样的 ...
- server-sent-event使用流信息向客户端发送数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML DOM应用案例1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ThinkPHP模版验证要注意的地方
Model页面 <?php class LoginModel extends Model { //protected $tableName = 'userinfo'; //表名和model不一致 ...
- 解决Cordova安装Cannot find module 'bplist-parser'问题
安装完cordova出现找不到必须的模块 出现原因不明,不过如果出现这个问题,我们遇到缺什么模块就安装什么模块就可以了.如图所示
- [java语言]——InetAddress类的getByName()方法
InetAddress---表示互联网协议(IP)地址 ---InetAddress.getByName("www.163.com")----在给定主机名的情况下确定主机的IP地址 ...