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 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的基本理解的更多相关文章
- <转>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组合,类组合,属性组合,标签组合,伪类组合,以及以上所有混合组合) ...
随机推荐
- PAT(B) 1044 火星数字（Java）进制转换
题目链接:1044 火星数字 (20 point(s)) 题目描述 火星人是以 13 进制计数的: 地球人的 0 被火星人称为 tret. 地球人数字 1 到 12 的火星文分别为:jan, feb, ...
- xorm表结构操作实例
获取数据库信息 package main import ( "fmt" _ "github.com/go-sql-driver/mysql" "git ...
- python入门-windows下python环境搭建
1. 下载安装包 选择executable版,根据自己电脑的操作系统选择是32位还是64为. python3.6-64位下载 python3.6-32位下载 2. 安装python 下载之后是这样的 ...
- jQuery效果之滑动
jQuery 滑动方法有三种:slideDown().slideUp().slideToggle(). jQuery slideDown() 方法用于向下滑动元素, 语法:$(selector).sl ...
- QGroupBox
QGroupBox窗口部件提供了一个有标题的组合框 组合框提供一个框架.一个标题和一个键盘快捷键,并且显示在它里面地其它不同窗口部件.标题在上面,键盘快捷键移动键盘焦点到组合框的一个子窗口部件,并且子 ...
- jmeter第一次使用
创建线程组 依次创建后,在http请求页面填入接口地址,参数,头信息,点击运行,然后查看结果树
- 无法写入配置文件...需要在IIS中手动创建此虚拟目录,才可以打开此项目
无妄之灾 之前闲着没事写了一个webapi项目,今天下了班闲来无事就像拿出来改改,没想到打开的时候就提示出现错误. 没错就是这货,其实也不是第一次遇见这个问题了,但是之前一直没有找到解决方案,在网 ...
- Linux系统中安装软件的几种方式
转载:https://blog.csdn.net/qq_36119192/article/details/82866329 好长时间没有静下心来学习一下linux了 最近对linux安装软件有了点小小 ...
- shiro系列五、shiro密码MD5加密
Shiro-密码的MD5加密 1.密码的加密 在数据表中存的密码不应该是123456,而应该是123456加密之后的字符串,而且还要求这个加密算法是不可逆的,即由加密后的字符串不能反推回来原来的密 ...
- python网络爬虫之爬取图片
今天使用requests和BeautifulSoup爬取了一些图片,还是很有成就感的,注释可能有误,希望大家多提意见: 方法一:requests import requests from bs4 im ...