什么是 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. 18 COUNTIF函数

    求大于小于等于某个数字的数字有多少 格式:=COUNTIF(数据区,"条件") 注意条件需要用英文双引号引起来. 举个例子: =COUNTIF(A2:D5,">20 ...

  2. PAT(B) 1037 在霍格沃茨找零钱（Java）

    题目链接:1037 在霍格沃茨找零钱 (20 point(s)) 题目描述 如果你是哈利·波特迷,你会知道魔法世界有它自己的货币系统 -- 就如海格告诉哈利的:"十七个银西可(Sickle) ...

  3. WUSTOJ 1338: The minimum square sum（Java）

    题目链接:1338: The minimum square sum Description Given a prime p(p<108), you are to find min{x2+y2}, ...

  4. 在微服务架构中service mesh是什么？

    在微服务架构中service mesh是什么 什么是 service mesh ? 微服务架构将软件功能隔离为多个独立的服务,这些服务可独立部署,高度可维护和可测试,并围绕特定业务功能进行组织. 这些 ...

  5. ubuntu修改密码

    ubuntu修改密码 本文链接:https://blog.csdn.net/heybob/article/details/9095727 修改root密码: 1,$sudo su,输入密码进入root ...

  6. 错误 4 error C2039: “Sleep”: 不是“boost::this_thread”的成员

    检查是否是在x64下运行的. #include <pcl/io/openni2_grabber.h> #include <pcl/visualization/cloud_viewer ...

  7. 一行css代码搞定响应式布局

    在这篇文章中,我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图,它将根据屏幕的宽度来改变列的数量.最精彩的地方在于:所有的响应特性被添加到了一行 css 代码中.这意味着我们不必将 HT ...

  8. PC启动过程详解

    系统启动过程 1. 预引导(Pre-Boot)阶段 2. 引导阶段 3. 加载内核阶段 4. 初始化内核阶段 5. 用户登录阶段 基本概念: BIOS:即“Basic Input/Output Sys ...

  9. requests模块的基本用法

    requests 什么是requests模块 python中封装好的一个基于网络请求的模块 作用 用来模拟浏览器发送请求 环境安装 pip install requests 编码流程 指定 url 发 ...

  10. css常用代码大全

    css常用代码大全,html+css代码 html+css可以很方便的进行网页的排版布局,还能减少很多不必要的代码. 一.文本设置1.font-size: 字号参数 2.font-style: 字体格 ...