当前位置 博文首页 > 文章内容

    htmljs,html外观修饰美观与否就和css有关了

    作者:Tan09wlll 栏目:Tan的日记 时间:2021-02-25 14:55:16

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



         当使用go语言制作完一个博客后端的部分后,部署好服务器后,下一步就是前端部分,那么首先我们需要问自己的就是.

         1.前端是什么?

         2.前端起什么作用?

         3.为什么要写前端?

         分析问题:

         前端对应的就是用户能看到的东西.

         前端的作用就是为用户创建一个可视化的窗口,并附带一些功能.

         因为需要

         首先我们博客都是在游览器中打开,当你通过域名使用游览器访问别人的博客首页的时候,比如CSDN,内部操作就是 这个CSDN的域名指向其服务器的外网IP地址,通过地址我们访问了一个index.html文件,然后就是我们所看到的东西了,比如标题,推送,页面特效之类的,这些使用css以及javaScript(简称JS)来实现,就像一辆车,车外框就是html,外观修饰美观与否就和css有关了,当然JS可能用的更多,再就是还可能用到css,js设计的框架.功能的多寡,比如造型酷炫,动态特效,多半都是JS来实现的,这里我写了一个博客的登录界面(没有设密码,界面绿色按钮就能进入博客,进入后用的java来实现的时间流动),图片什么的因为是别人的这里就不上了,先上源代码,我写的代码很简单很容易应该就能看懂.

         <!DOCTYPE html><html><head><metahttp-equiv="Content-Type"content="text/html" ; charset="UTF-8"><title>登陆页面</title><metaname="description"content="这是一个以日志为主的博客,提供学习所需要的知识学习"><linkhref="./css/page.css"type="text/css"rel="stylesheet"></head><body><divclass="Scanner"><h2>博客页面登录系统</h2><form><!-- 用户输入框 --><divclass="inputScanner"><inputtype="text"name="user"required=""><label>用户名</label></div><!-- 密码输入框 --><divclass="inputScanner"><inputtype="password"name="pwd"required=""><label>密码</label></div><!-- 按钮 --><inputclass="button-登录"type="submit"title="登录"value="" ><label></label><inputclass="button-注册"type="submit"title="注册"value="" ><inputclass="button-游客模式"type="submit"title="游客模式"value=""onclick="location.href='./index.html'"></form></div></body></html>

         body{margin: 0;padding: 0;background-image: url("../img/81585358_p0_master1200_waifu2x_photo_noise2_scale_tta_1.png");/* 背景设置 */background-position: center center;background-repeat: no-repeat;background-attachment: fixed;background-color: pink;background-size: cover;}.Scanner{/* 这个方法要记住,特别重要 */position:absolute ;top: 50%;right: 50%;/* 还有这个 整体调位置*/transform: translate(-50%,-50%);/* width:400px; */height:400px;padding: 40px;background:rgba(206, 203, 205, 0.692);box-sizing:border-box;/* 这个阴影太骚了 */box-shadow:025px25pxrgba(2, 0, 1, 0.692);/* 圆角一下子提升逼格 */border-radius: 35px;}/* 新的写法学到了,这样一看就知道哪里是哪里了 */.Scannerh2{/* 一行 margin: 0 0 40px;这里替代的是这2个代码 *//* margin-block-start: 0px; margin-block-end: 40px ; */margin: 0040px;/* 写个padding预留位置给自己微调 */padding:0; /* 这里记住标题颜色和框框颜色一致 */color:rgba(4, 16, 17, 0.657);/* 文字排列中间最好看额 */text-align:center; }.Scanner.inputScanner {/* 这里是相对位置哟 */position:relative; }.Scanner.inputScannerinput[type="text"],.Scanner.inputScannerinput[type="password"]{/* 使用width之前,输入框和用户共同使用inputScanner这个盒子,100%的意思是填满这个盒子的宽度,那么用户自然就被挤下去了*/width: 100%;/* 这里第一个10px是height 第二个0是width 加padding是为了未调整,也可以使用,padding-top加padding-bottom这样的写法*//* 精髓之处 padding: 10px 0 padding-bottom:10px padding-top:10px height就有2个部分一个是top一个bottom *//* padding-bottom: 10px ; padding-top: 10px; */padding: 10px0;/* 这里用来调整方框的大小 */font-size: 16px;/* 颜色和h样式的标题对齐就行了*/color:rgba(4, 16, 17, 0.794);/* 边框中输入字符的间隙,一般设置1px比较优美 */letter-spacing: 1px;/* 边框底下加点距离美感 */margin-bottom:30px;/* 用这个命令去除边框的帽子框,看起来逼格很高 这也是说明了搜索框其实就是套了一个border边框罢了,去掉,一条线才是搜索框*/border:none;/* 这就和眼影的效果一样,和h标题还有阴影统一哟 */border-bottom:2px solid rgba(4, 16, 17, 0.657);/* 根据谷歌搜索:ouline属性专家建议删除,因为对视觉有障碍的人不友好. */outline:none;background:transparent;/* 粗体字很舒服,打出来的就像婴儿肥*/font-weight: bolder;}/* 使用label好处就是外面没有盒子,用div就还得自己拆解一遍盒子 */.Scanner.inputScannerlabel{/*这个是实在是太好用了好吗,自己就能找到自己该呆的地方 */position: absolute;top: 0;left: 0;/* padding加的是层次感,看起来才不臃肿 */padding: 10px0;font-size: 17px;/* 颜色选择统一颜色,但是色深要浅一些,这样看起来更加舒服 */color: rgba(12, 10, 10, 0.075);/* 加粗加倾斜看起来舒服多了 */font-style:oblique;font-weight: bolder;/* font-size: 15px; *//* 小细节来了,这里要额外注意的就是我们的label要确保不能被选中点击!!!,这里的用户名和密码的作用只起到引导的作用,下面的这个功能就是干这个的*/pointer-events: none;/* 顾名思义,过渡就是为了看起来更加顺滑,0.5s的过度看起来就贼舒服,调成10s就会变成ppt,就像卡机了一样*/transition: 0.5s;}/* 焦点元素,格外醒目*/.Scanner.inputScannerinput:focus{/* background-color: lightcyan; */font-size: 15px;font-style: italic;color: #903636ed;font-size: 20px;}/* 最后一个需要美化的就是按钮了 */.Scanner.button-登录{background: transparent;border: none;outline: none;color: black;font-weight: bolder;font-size:18px;background: rgba(128, 71, 214, 0.418);padding: 20px50px;cursor: pointer;margin: auto;position: absolute;top: 70%;left:10%;bottom:20%;/* left: 25%; *//* */box-shadow:05px5pxrgba(2, 0, 1, 0.692);border-radius: 20px;}.Scanner.button-登录:focus{background-color: rgba(128, 71, 214, 0.924);}.Scanner.button-注册 {background: transparent;border: none;outline: none;color: rgba(218, 20, 20, 0.534);font-weight: bolder;font-size:18px;background:rgba(218, 20, 20, 0.431);padding: 20px50px;cursor: pointer;margin: auto;position: absolute;top: 70%;right:10%;bottom:20%;/* left: 25%; *//* */box-shadow:05px5pxrgba(2, 0, 1, 0.692);border-radius: 20px;}.Scanner.button-注册:focus{background-color: rgb(218, 20, 20);}.Scanner.button-游客模式 {background: transparent;border: none;outline: none;color: rgba(218, 20, 20, 0.534);font-weight: bolder;font-size:18px;background:rgba(20, 218, 63, 0.452);padding: 20px50px;cursor: pointer;margin: auto;position: absolute;top: 90%;right:20%;left:20%;bottom: 10%;/* left: 25%; *//* */box-shadow:05px5pxrgba(2, 0, 1, 0.692);border-radius: 20px;}.Scanner.button-游客模式:focus{background-color: rgb(20, 218, 63);}

         以上是界面部分,详细的方法和作用已经内置在了css中,每个代码的含义包括用法,细心的看,不懂的搜一下百度就能看懂.

         然后就是博客主页部分

         <!DOCTYPE html><htmllang="zh-CN"><head><metahttp-equiv="Content-Type"content="text/html" ; charset="UTF-8"><title>博客首页</title><metaname="description"content="这是一个以日志为主的博客,提供学习所需要的知识学习"><linkhref="./css/index.css"type="text/css"rel="stylesheet"></head><body><divclass="banner"><divclass=user><!-- <img src=""> --></div><divclass="menu"><label>游客ID:007</label><br/><ahref="./index.html"title="目录"class="nav"><label>目录</label><br/></a><ahref="./index.html"title="博文空间"class="nav"><label>博文空间</label><br/></a><formclass="search"action="https://www.baidu.com/s"method="GET"><inputclass="search-input"type="search"placeholder="百度搜索"name="bd"class="search-input"></div><divclass="music"><embedsrc="music/KG、滴草由実 - 叶わない恋でも… (即使是没有结果的爱恋)(1).mp3"hidden="true"loop="true"></div></div><divclass="content" ><divclass="time"><divclass="fluent-time"></div><!-- css=背景墙用壁纸 --></div><!-- JS操控时间部分 --><script>//获取div标签var div = document.querySelector(".fluent-time");// 这里是时钟的方法functionclock() {var date = newDate();var h = date.getHours();var m = date.getMinutes();if (m < 10) { m = "0" + m; }var s = date.getSeconds();if (s < 10) { s = "0" + s; } div.innerHTML = `${h}:${m}:${s}`; } setInterval(clock, 1000); clock();</script><divclass="saying"><!-- 背景墙用壁纸 --><h5>真正的强者,愿意以弱者的自由为边界 --《剑来》</h5></div></div></body></html>

         body{background-color: #9D9D9D;background-size: cover;}.banner{background-color: rgba(253, 252, 250, 0.664);position: fixed;left:0;top: 0;width: 25%;height:100%;font-size: 15px;}.banner.user{position: absolute;width:150px;height:150px;background-image:url("../img/user_01.png");left:25%;top: 10%;border-radius: 50%;box-shadow:0020px black;}.banner.menu{position:absolute;top:32.7%;padding:15px ; left:16%;width:180px;height: 220px;/* background-color: violet; */font-size: 25px;}.banner.menu.search{padding:35px;}.banner.menu.search-input{left: 150px ;width: 100px ;height: 20px ;border-radius: 10px ;padding: 10px;padding-left: 19px;outline: none;}label{width: 50px;color: black;font-size: 15px;font-weight: bolder;margin: 40px;}.bannerimg{width: 100%;height: 50%;}.content{box-shadow: 001remrgba(161,177,204,.4);background-color: white;padding: 2.5%;padding-top: 10px;position: absolute;width:70%;height:95%;bottom:0%;left:25;top:0%;right:0%;}.content.time{width: 96%;height:40%;background-image: url("../img/时间壁纸.jpg");background-position:bottom center;padding-top: 0;/* background-size: cover; */background-repeat: no-repeat;border-radius: 60px;box-shadow:50px50px50px#0000004f;}.content.fluent-time{font-size: 80px;color:white;position: absolute;left:33.5%;top: 10%;}.content.saying{width: 96%;height: 60%;background-image: url("../img/歇后语壁纸\ .jpg");background-position: center center;background-size: cover;margin-top: 20px;background-repeat: no-repeat;border-radius: 60px;box-shadow:50px50px50px#0000004f;}.content.sayingh5{position: absolute;top:80%;left:60%;color: white;}

         这里借鉴一下就行了,做的并不好,比较初学者,主要是JS的运用,这里的用的时间流动还是一般吧

         代码已经部署到服务器上可以随时查看: