什么是 HTML？

HTML 就像造房子一样，一栋房子有多个组成部分，html类似于房子的户型，它设计了房子的整体架构、分区、布局，而且还定义了每个区块的功能作用。html技术为后续入住的数据事先搭建好了对应的空间。

标签

什么是CSS？；

Css顾名思义就是块，网页上的框框。类似于房子的装修，装修让这栋房子看上去更加的美观，装修定义了每一块墙面该粉刷成什么颜色，地板应该如何规划，是长方形还是正方形。装修应该从整体主题出发，依据优秀的审美素养规划设计每一个区域的样式设计，整体装修方案也表达了这栋房子的主题

标签

Body- body；Body- body代表主题内容的开始与结束

Div；表示一个块的标签，

P；代表行

Margin；代表外边距

Border；代表边框

Padding；代表内边距

Background-color；代表背部颜色选取

width;代表宽度

#；代表元素ID的索引

。；代表类的索引

HELM编程；

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebAxue.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="css/StyleSheet1.css" rel="stylesheet" />
<title>学习HTML</title>
</head>
<body>
<form id="form1" runat="server">
<div id="kuang" class="aaa">
<div id="AA" style="background-color: azure ">
<p id="hang">博客园登录</p>
<p class="cent">代码改变世界</p>
</div>

<div id="BB">
<div>

<div style="width:520px;margin-top:20px;" class="ml40"><input class="tl-price-input" type="text" placeholder="登陆用户名" /></div>
</div>
<div>
<div style="width:520px;margin-top:20px;" class="ml40"><input class="tl-price-input" type="text" placeholder="密码" /></div>
</div>
<div >
</div>
<div style="margin-top:40px;text-align:center">
<button>登陆</button>
</div>

</div>
</div>

</form>
</body>
</html>

Css编程；

body {background-color:aquamarine:
}
* {
margin: 0;
padding: 0;
}
.aaa {
width: 600px;
height:700px;
margin:0px auto;
}
#AA{
height:130px;
width:100%;

}
#BB{
height:450px;
width:100%;
background-color: azure ;
}

#hang {
font-size: 40px;
text-align: center;
padding-top: 20px;
}
.aaa {
text-align : center;
}
.m140{
margin-left:40px;
}
input-button{
border:none;
outline :none;
}
.tl-price-input {
width: 100%;
border: 1px solid #ccc;
padding: 7px 0;
background: #F4F4F7;
border-radius: 3px;
padding-left: 5px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}

.tl-price-input:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}

button {
width: 300px;
padding: 8px;
background-color: #428bca;
border-color: #357ebd;
color: #fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
text-align: center;
vertical-align: middle;
border: 1px solid transparent;
font-weight: 900;
font-size: 125%

程序展示图；

HEML与Css的基本理解的更多相关文章

  1. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  2. css基础--深入理解opacity和rgba的区别

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 首先这两个都与透明度有关,那么他们之间有什么具体的区别呢?在实际工作中我们需要注意什么呢?请您接着往下看 语法 1. rg ...

  3. 关于CSS的个人理解

    CSS的个人理解 一.概念 层叠样式表,主要由属性和属性值(value)组成.(虽然HTML.CSS对代码大小写不敏感,但是属性和属性值对代码大小写是敏感的) 二.工作方式 1.工作原理 由浏览器将C ...

  4. css 盒子模型理解

    盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...

  5. CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位

    其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: ...

  6. css基础--深入理解弹性盒flex布局

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 1. 前言 flex弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素 拥有更恰当的排布行为, ...

  7. CSS中正确理解浮动以及clear:both的关系

    要注意以下几点: 1. 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以). 2. 浮动元素后边的非浮动元素显示问题. 3. 多个 ...

  8. 【CSS】Sass理解

    原文在 https://github.com/zhongxia245/blog , 欢迎 star! Sass理解 时间:2016-09-24 22:56:12 作者:zhongxia 这里就不讲解S ...

  9. 【CSS选择器】理解汇总和记录

    1.选择器中符号含义汇总(这部分包含了对选择器的通用理解): 1.1.多元素组合符号:(共6个,一个是CSS3的)(适用所有元素:ID组合,类组合,属性组合,标签组合,伪类组合,以及以上所有混合组合) ...

随机推荐

  1. C++ 中 static 与 const 的用法及对比

    在这个学习过程中我对 static 及 const 的使用时常会混淆,因此整理,加深记忆 一.类的静态成员 如果某个属性为整个类所共有,不属于任何一个具体对象,则采用 static 关键字来声明静态成 ...

  2. VNC的使用

    1. 安装 rpm -ivh tigervnc-server--.el6.x86_64.rpm 如果rpm安装时发现有依赖,建议直接使用yum安装,轻松解决依赖问题: yum install tige ...

  3. Linux查询命令帮助信息（知道）

    方法一 command --help 方法二 man command 操作涉及到的按键: 空格键:显示手册的下一屏 Enter键:一次滚动手册的一行 b:回滚一屏 f:前滚一屏 q:退出 结果基本上全 ...

  4. Go实战--golang中使用redis(redigo和go-redis/redis)

    开源库redigo的使用 github地址: https://github.com/garyburd/redigo 文档地址: http://godoc.org/github.com/garyburd ...

  5. 在vue中使用ElementUI

    完整引用ElementUI: 安装:在需要使用到的vue项目目录下,使用npm下载安装: npm/cnpm i element-ui -S/--save <!-- 引入样式 --> < ...

  6. Docker 学习笔记（二）：Dockerfile 定制镜像

    镜像的定制实际上就是定制每一层所添加的配置.文件. 如果我们可以把每一层修改.安装.构建.操作的命令都写入一个脚本,用这个脚本来构建.定制镜像,那么之前提及的无法重复的问题.镜像构建透明性的问题.体积 ...

  7. Nginx学习笔记（五）：高级数据结构

    目录 动态数组 单向链表 双端队列 红黑树 缓冲区 数据块链 键值对   动态数组 ngx_array_t 表示一块连续的内存,其中存放着数组元素,概念上和原始数组很接近 // 定义在 core/ng ...

  8. sql server中:isnull(列名，0) 和isnull(列名，0)<>0 的区别

    1.isnull(参数1,参数2),判断参数1是否为NULL,如果是,返回参数2,否则返回参数1. 2.isnull(列名,0),isnull()函数是用来判断列名是否为null,如果为NUll,则返 ...

  9. Python、PyCharm、Django框架安装

    一.下载Python环境 1.1 下载Python环境,以下网址: https://www.python.org/downloads/release/python-373/ 下载安装包: 1.2点击安 ...

  10. Story of Jerry Wang's Wechat subscription account

    As an SAP Techinical Ambassador,Jerry is always willing to share his SAP expertise to various social ...