HEML与Css的基本理解

什么是 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>
</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的基本理解的更多相关文章

<转>HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
css基础--深入理解opacity和rgba的区别
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言首先这两个都与透明度有关,那么他们之间有什么具体的区别呢?在实际工作中我们需要注意什么呢?请您接着往下看语法 1. rg ...
关于CSS的个人理解
CSS的个人理解一.概念层叠样式表,主要由属性和属性值(value)组成.(虽然HTML.CSS对代码大小写不敏感,但是属性和属性值对代码大小写是敏感的) 二.工作方式 1.工作原理由浏览器将C ...
css 盒子模型理解
盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...
CSS定位深入理解完全掌握CSS定位相对定位和绝对定位
其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: ...
css基础--深入理解弹性盒flex布局
欢迎访问我的个人博客:http://www.xiaolongwu.cn 1. 前言 flex弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素拥有更恰当的排布行为, ...
CSS中正确理解浮动以及clear:both的关系
要注意以下几点: 1. 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则不可以). 2. 浮动元素后边的非浮动元素显示问题. 3. 多个 ...
【CSS】Sass理解
原文在 https://github.com/zhongxia245/blog , 欢迎 star! Sass理解时间:2016-09-24 22:56:12 作者:zhongxia 这里就不讲解S ...
【CSS选择器】理解汇总和记录
1.选择器中符号含义汇总(这部分包含了对选择器的通用理解): 1.1.多元素组合符号:(共6个,一个是CSS3的)(适用所有元素:ID组合,类组合,属性组合,标签组合,伪类组合,以及以上所有混合组合) ...

随机推荐

STM32之复用功能
复用功能分复用输入,复用输出,STM32芯片内部集成多种模块,如GPIO.串口.i2c等,为使IO端口支持这些模块,厂家对IO端口进行扩展,同一个端口通过设置寄存器会有不同的功能.如下图IO结构图: ...
stm32片上ADC转换实验
原理图所示: BAT_DET 接到PB0 引脚,VSYS 是直流3.7V的电压.再来看下103的adc转换和引脚GPIO的关系我们直接选用ADC1 根据上表格只能使用通道8 下面给我常用的ADC1寄 ...
Hbuilder环境下配置php
XAMPP的安装 https://blog.csdn.net/qing666888/article/details/81914389 安装并配置好Xampp后,在Hbuilder中下载php插件,工具 ...
【SCALA】3、模拟电路
Simulation package demo17 abstract class Simulation { type Action = () => Unit case class WorkIte ...
Python Django mysqlclient安装和使用
一.安装mysqlclient 网上看到很过通过命令:pip install mysqlclient 进行安装的教程,但是我却始终安装失败,遇到的错误千奇百怪,后来通过自己下载mysqlclient客 ...
Python实现行列式计算
数学公式: 代码: # 逆序数 def getInversion(numlist): count = 0 for i in range(1,len(numlist)): subscript = num ...
iOS音频学习笔记一：常见音频封装格式及编码格式
(1) pcm格式 pcm是经过话筒录音后直接得到的未经压缩的数据流数据大小=采样频率*采样位数*声道*秒数/8 采样频率一般是22k或者44k,位数一般是8位或者16位,声道一 ...
stm32 FSMC-TFTLCD显示
TFTLCD TFT液晶屏常用的通信模式主要有6800模式和8080模式,对于TFT彩屏通常都使用8080并口(简称80并口)模式 8080模式的读写时序其实跟LCD1602或者LCD12864的读写 ...
shell 三剑客之 sed 命令详解
sed 编辑命令 sed 编辑命令对照表把 /etc/passwd 文件赋值到当前路径下,进行操作 cp /etc/passwd ./ cat -n passwd sed 删除操作删除 passw ...
awk 条件及循环语句和字符串函数
条件语句 if(条件表达式) 动作1 else if(条件表达式) 动作2 else 动作3 循环语句: while循环: while(条件表达式) 动作 do while循环: do 动作 whil ...

HEML与Css的基本理解

什么是 HTML？

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

随机推荐

热门专题