web 开发

最新推荐文章于 2024-07-08 21:32:26 发布

XXXefiskksadfalf

最新推荐文章于 2024-07-08 21:32:26 发布

阅读量122

点赞数

文章标签： asp.net 数据库 mysql

本文链接：https://blog.csdn.net/miiiiiiiiiiiii/article/details/115205920

版权

**1 确定网站主题：**即确定建设哪类网站服务，如求职、社区、交友、咨询、官网、论坛等

**2 购买好域名：**域名是网站在互联网上的名字

3 选择服务器技术： 要先确定使用【编程语言、数据库、服务器技术】主要流行有asp、asp.net、php、jsp等语言；access、mssql、mysql等数据库一般搭配为：asp+access、asp+mssql、asp.net+access、asp.net+mssql、php+mysql、jsp+mysql 小型网站可以使用access数据库；规模大的网站都使用mssql或mysql 数据库

**3 确定网站结构：**版块与栏目的编排，确定网站的板块，与板块内的栏目目录即网站地图链接结构，页面之间的链接的拓扑结构

**4数据库规模化：**确定网站的数据库规模+类型，就可设计数据库结构了，结构和字段设计要严谨。

5 后台开发：编写后台数据库程序是网站开发的核心部分，后台需要大量复杂的逻辑，及处理各种数据，如从数据库中执行读取、写入库、修改、删除数据库等操作。网站后台程序是网站的骨骼，骨骼的是否强壮，直接影响日后网站的运行。

6 前台开发：界面架构网站测试：先在自己的主机上进行运行测试，也可以先上线，然后在运行过程中不断修改和完善。

**7 发布网站：**通过FTP软件上传到远程服务器上(初学者，一般会选择虚拟主机）；把网站空间绑定域名，做域名解析。就可以通过网址来访问网站了。

8 网站推广

9 网站日常维护：即网站运行和用户使用过程中的正常、稳定、安全。

后台数据库内容

用户块
一般涉及：
用户统计：ID，用户名，终端设备个数，状态，操作管理(删除)

网站开发

固定编写结构：：

元素-标签-属性如: head-meta-charset

html:

<!doctype html>   //定义html文档类型；必须是HTML文档的第一行，位于<html>之前，它是指示浏览器识别HTML版本的指令。
<html>
<head> 
	<meta charset="utf-8"> 	//定义网页文字类型
	<title>网站标题</title>
</head>
<body>
	<div class=”变量名“>  	 //定义块布局
	<p>段落内容</p>
	<h1>标题</h1>
	</div>	
</body>
</html>

<!doctype> 是声明要引用DTD规则，DTD规定了标记语言的规则,浏览器才能正确的呈现内容。
头部：head元素中添加的标签有：meta,title,base,link,style,script
布局：div元素中添加的标签有：h1-6,p,table,(tr(th,td)),script,style

css

*{}   	//定义全部 样式规则
body{}  //定义主体 样式规则
html{}  //定义块 样式规则
、、、这三个为样式基础、、、
.channel{}    //class属性变量名
#bigBox{} 	//id属性变量名

calss属性，在css文件中用 .属性名
id属性，在css文件中用 #属性名

css

属性>元素>值
display：有2个块元素，grid ,flex

grid：网格布局。将网页划分成一个小网格，可任意组合不同的网格，做各种布局。
display:grid; //默认是块元素；
display:inline-grid; // 是行内块元素
参考：https://www.cnblogs.com/jwyblogs/p/11757968.html
CSS Grid中 fr 单位，是一个自适应单位，被用于长度值中分配剩余空间，定义布局通过小数单位(fr)指定时，跨越的列“squishes”比非跨越的列更多。
参考：http://caibaojian.com/fr.html

Flexbox 是 flexible box 的简称，指“灵活的盒子容器”。能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。是 CSS3 引入的新布局模式，决定了元素如何在页面上排列，能在不同的屏幕尺寸和设备下可预测地展现。
display:Flexbox; //布局；
flex container，简称"容器"
flex item，简称"项目"
参考：https://www.cnblogs.com/hellocd/p/10443237.html

text-overflow：省略号样式

语法结构：有两种 text-overflow参数值
display:Flexbox; //布局；
text-overflow : clip //不显示省略标记（…），而是简单的裁切
text-overflow : ellipsis //文本溢出时显示省略标记（…）

html

标签

input：输入框标签。
去掉input的边框颜色
<inputstyle="border:0px;outline:none;cursor:pointer;autocomplete=“off”"type="text"placeholder=“请输入手机号”>
border:0px； //去除placeholder外的边框
outline:none; //去除点击input框时显示的边框
cursor:pointer; //点击显示光标光标呈现为指示链接的指针（即一只手）
placeholder属性; //提供可描述输入字段的提示信息(hint)

SVG：矢量图代码。
即 Scalable Vector Graphics,是一种用来绘制矢量图的 HTML5 标签。
可通过3种标签将 svg文件 嵌入 HTML 文档：< embed>、< object>、 < iframe>
可直接嵌入到HTML页面中：< SVG>

用法：：
iframe标签： //所有浏览器都支持，有结束,可避免浏览器理解。
：：可添加的属性设置有
frameborder 值为1,0 //规定是否显示框架周围的边框。0不显示。
width,height //设置宽高。
src //添加要显示的文档URL。

SVG文件：：
后缀名：.svg
文件内容结构：< SVG>< /SVG>
svg参考：https://www.runoob.com/svg/svg-inhtml.html
iframe参考：https://www.w3school.com.cn/tags/tag_iframe.asp

实例

进度条：2种

HTML 编写
使用html5 progress标签：2个值 // value 、max
更改颜色：通过css的2个伪元素，添加样式
:-webkit-progress-bar 全部进度
:-webkit-progress-value 已完成进度
受浏览器兼容限制，如IE10，这两个伪元素作用无效；是直接用color样式修改已完成进度的颜色，全部进度为background。如FireFox，progress-bar为已完成进度，background为全部进度。而Opera，只能是浏览器默认样式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>HTML进度条怎么制作 </title>
</head>
<body>
   <p>进度：</p>
   <progress value="40" max="100"></progress>
</body>
</html>

----------------------------------
// css

progress
{
   color:orange; /*是兼容IE10的已完成进度背景*/
   border:none;
   background:#d7d7d7;/*这个属性可作为Chrome的已完成进度背景，但会被下面的::progress-bar覆盖*/      
   position: absolute;
}
progress::-webkit-progress-bar   /*是更改全部进度的背景*/
{
   background:#d7d7d7;
}
progress::-webkit-progress-value,   /*是兼容Chrome 的已完成进度背景*/
progress::-moz-progress-bar   /*是兼容Firefox 的已完成进度背景*/
{
     background:orange;
}

备注：测试只能更改全部进度颜色，已完成进度没变化，边框圆角也无效。

HTML+CSS 编写
通过 div盒子来写进度条

// HTML部分：

<p>进度条</p>
<div class="container">
   <div class="skills loading">70%</div>    <!-- 必须填写才会显示完成进度 -->
</div>
-----------------------------

// CSS部分

.container {
    width: 300px;
    height: 30px;
    background-color: #ddd;   /*全部进度背景*/
    border-radius: 20px;
    position: relative;
   }
   
   .skills {
    line-height: 30px;
    color: white;    /*文字颜色*/
    border-radius: 20px;
    text-align: center;
    width: 70%;
    background-color: #4CAF50;    /*已完成进度背景*/
    position: absolute;  
   }

备注：测试必须有文字才能显示已完成进度。

在这里插入图片描述

备注

代码中常用变量名：
.content为容器，.b为项目
行：row；列：column；

XXXefiskksadfalf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web 开发

**1 确定网站主题：**即确定建设哪类网站服务，如求职、社区、交友、咨询、官网、论坛等**2 购买好域名：**域名是网站在互联网上的名字3 选择服务器技术：要先确定使用【编程语言、数据库、服务器技术】主要流行有asp、asp.net、php、jsp等语言；access、mssql、mysql等数据库一般搭配为：asp+access、asp+mssql、asp.net+access、asp.net+mssql、php+mysql、jsp+mysql 小型网站可以使用access数据库；规模大的网
复制链接

扫一扫