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的入门的更多相关文章

  1. 网页设计（CSS&JS）

    实验一  简单静态网页设计 一. 实验目的: 复习使用记事本编辑网页的方法. 熟悉不同表单控件类型的应用. 练习使用记事本在网页中添加表单与表单元素. 二. 实验内容: 根据提供的素材设计在线调查问卷 ...

  2. HTML学习笔记——标准网页设计+使用CSS、Javascript

    一.标准网页设计 1.标准网页概述: 标准网页设计要遵循,内容与表现相分离.   内容 + 表现 = 页面  ---  即 :XHTML + CSS = PAGE 内容与变现相分离,也就是内容使用HT ...

  3. 关于网页设计的css+html相对定位和决定定位的理解

    css中有很多定位,其中最重要的是相对定位和绝对定位: 定位很重要,不搞好,网页就会很乱,显示的完全不是自己想要的效果,自己必须掌握: 首先说一个重要的结论:绝对定位,是不占位置的,总是相对离自己最近 ...

  4. 网页设计简史看设计&代码“隔膜”

    本文来自网易云社区 作者:马宝 设计与代码之间隔膜所在?既然你诚心诚意地问了,我就大发慈悲地告诉你.为了防止地球被破坏,为了维护世界的和平,为了贯彻爱与真实的邪恶~,我是穿梭在前端与设计之间爱与美丽的 ...

  5. HTML&CSS精选笔记_HTML与CSS网页设计概述

    HTML与CSS网页设计概述 Web基本概念 认识网页 网页主要由文字.图像和超链接等元素构成.当然,除了这些元素,网页中还可以包含音频.视频以及Flash等. 名词解释 Internet网络 就是通 ...

  6. 新编html网页设计从入门到精通 (龙马工作室) pdf扫描版​

    新编html网页设计从入门到精通共分为21章,全面系统地讲解了html的发展历史及4.0版的新特性.基本概念.设计原则.文件结构.文件属性标记.用格式标记进行页面排版.使用图像装饰页面.超链接的使用. ...

  7. HTML 5+CSS 3网页设计经典范例 (李俊民,黄盛奎) 随书光盘​

    <html 5+css 3网页设计经典范例(附cd光盘1张)>共分为18章,涵盖了html 5和css3中各方面的技术知识.主要内容包括html 5概述.html 5与html 4的区别. ...

  8. CSS+DIV网页样式布局实战从入门到精通 中文pdf扫描版

    CSS+DIV网页样式布局实战从入门到精通通过精选案例引导读者深入学习,系统地介绍了利用CSS和DIV进行网页样式布局的相关知识和操作方法. 全书共21章.第1-5章主要介绍网页样式布局的基础知识,包 ...

  9. 网页设计与开发——HTML、CSS、JavaScript (王津涛) pdf扫描版

    网页设计与开发——html.css.javascript从网页制作实际出发,除了详细地介绍html页面制作.css样式控制和javascript动态程序之外,还介绍了html 5.全书共分15章,各章 ...

随机推荐

  1. Unable to open debugger port (127.0.0.1:51554): java.net.SocketException "socket closed"

    刚开始使用IDEA 总是有各种各样奇葩的问题 启动报错: Unable to open debugger port (127.0.0.1:51554): java.net.SocketExceptio ...

  2. 你不知的DOM编程

    前言:随着vue,react, angular的流行,可能现在我们不必经常的操作DOM,三大框架在副交互的操作中发挥着极大地优势.因为我们知道用脚本对DOM的操作非常昂贵,本文主要探讨常规的DOM操作 ...

  3. Android 开发笔记___初级控件之实战__计算器

    功能简单,实现并不难,对于初学者可以总和了解初级控件的基本使用. 用到的知识点如下: 线性布局 LinearLayout:整体界面是从上往下的,因此需要垂直方向的linearlayout:下面每行四个 ...

  4. Grunt打包之seajs项目【转】

    原文:http://www.cnblogs.com/accordion/p/4508154.html grunt与seajs grunt是前端流行的自定义任务的脚手架工具,我们可以使用grunt来为我 ...

  5. ③bootstrap文本使用基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. C#用panel实现子窗体的切换

    今天编程的时候,遇到一个问题:在同一个窗体区域加载两个不同的窗体,每次只显示一个子窗体并能够对这两个子窗体做切换. 对于这个问题用panel控件是非常简单的,只要每次清空panel控件上的子窗体,然后 ...

  7. 手动安装Eclipse的PyDev插件，重启无效

    想好好学习Python,又不想只用Emeditor开发,于是想到了Eclipse.之前配置过PyDev,很久没用,就放下了.这次重新配置,遇到了不少问题总结如下: 第一,使用网址自动更新.从网上搜了很 ...

  8. RabbitMQ消息队列系列教程（一）认识RabbitMQ

    摘要 RabbitMQ是最为流行的消息中间件,是处理高并发业务的利器.本系列教程,将跟大家一起学习RabbitMQ. 目录 RabbitMQ是什么? RabbitMQ的特点是什么? 一.RabbitM ...

  9. C#参考之sealed密封类(转)

    C# 语言参考 sealed(C# 参考) 当对一个类应用 sealed 修饰符时,此修饰符会阻止其他类从该类继承.在下面的示例中,类 B 从类 A 继承,但是任何类都不能从类 B 继承. 1     ...

  10. 07深入理解Java线程池

    之前面试baba系时遇到一个相对简单的多线程编程题,即"3个线程循环输出ADC",自己答的并不是很好,深感内疚,决定更加仔细的学习<并发编程的艺术>一书,到达掌握的强度 ...