什么是 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. 别再裸奔了，你的项目代码安全吗，再不加密就out了

    在工作中,有时候我们需要部署自己的Python代码 或进行私有化部署时,尤其现在都是通过docker镜像部署,我们并不希望别人能够看到自己的Python源程序. 加密Python源代码的方式,是将.p ...

  2. PB笔记之日期函数

    https://wenku.baidu.com/view/a0d5f16fb84ae45c3b358cc7.html this.object.yjzzrq[row]= RelativeDate(dat ...

  3. oracle给用户授权存储过程

    https://www.jianshu.com/p/fab356d68ae2 grant connect,resource to xinomonitor; 发现不能进行断点调试,然后授如下权限 gra ...

  4. 利用 nodejs 解析 m3u8 格式文件，并下 ts 合并为 mp4

    利用 nodejs 解析 m3u8 格式文件,并下 ts 合并为 mp4 以前看视频的时候,直接找到 video标签,查看视频地址,然后下载下来.. 后来发现,好多 video 标签打开元素审查,如下 ...

  5. 服务篇：我的第一WebService应用

    一.我的第一个Webservice应用 1.新建一个空项目 2.添加新项,加入asmx,并再浏览器浏览 3.添加一个aspx网页 4.右键引用→添加服务引用→高级→添加Web引用,输入再浏览器浏览的a ...

  6. Spring AOP 多个切点实现:JdkDynamicAopProxy

    Spring Aop 的底层生成代理类i的实现除 jdk的动态代理技术外,还用到了Cglib,不过在封装两者的设计原理上相差不大,只是底层工具不同而已. 本文只分析JdkDynamicAopProxy ...

  7. Neo4J之标签类型

    Neo4J的标签可以理解一个类,在创建一个节点时可以设置一个或多个标签: 1. 标签名为中文(可以) CRATE(节点名:标签1:标签2{属性1:34} 创建了一个节点名为“节点名”的节点(不可以用节 ...

  8. FreeRTOS 移植

    添加FreeRTOS源码到工程中 在工程源码中创建FreeRTOS目录存放拷贝的文件 拷贝FreeRTOS->Source中的文件 可将其他不需要的文件夹全部删掉,只留3个 拷贝Demo中Fre ...

  9. hive四种排序

    order by order by 会对输入做全局排序,因此只有一个reducer(多个reducer无法保证全局有序)只有一个reducer,会导致当输入规模较大时,需要较长的计算时间. set h ...

  10. Feign报错'xx.FeignClientSpecification', defined in null, could not be registered.

    解决: 在application.yml中配置: spring: main: allow-bean-definition-overriding: true 参考:https://blog.csdn.n ...