利用HbuilderX制作简单网页

您所在的位置：网站首页 › 网页表格设计软件 › 利用HbuilderX制作简单网页

利用HbuilderX制作简单网页

2023-11-23 13:43| 来源: 网络整理| 查看: 265

本次综合课程设计要求设计内容不限安卓App，小程序，h5界面等，实现两三功能。鉴于Android的知识放得太久，且AndroidStudio已被删除，所以尝试下载HbuilderX（十几M大小，操作简单），自学半天设计一个简陋的网页，由于没学过前端，所以很一般。

工具：在这里插入图片描述

项目文件及包含： 1.

HTML是描述网页文档的标记语言(网页) HTML的全写是Hyper Text Markup Language 一门标记语言是由很多标记组成的. HTML标记用来描述HTML文档每个HTML标签描述不同的文档内容

CSS是描述HTML(或XML)文档的样式表语言. CSS描述了元素在屏幕上、纸上或其他媒体上呈现的方式.

Javascript让HTML页面更加的动态和更有交互性. 在这里插入图片描述

内容结构：

DOCTYPE用来申明文档类型为HTML

和之间的内容用来描述HTML文档和之间的内容描述文档的头部信息和设置文档的标题和之间的内容为文档的可见内容和申明为一个标题

和

申明为一个段落

HTML结构图可以很快了解具体框架：在这里插入图片描述

主页面.html

主页面包含了整个网页我所想展示的东西。

div.sticky { position: -webkit-sticky; position: sticky; top: 0; padding: 5px; background-color: #C7DDEF; border: 2px solid #4CAF50; } 这里添加了一个具有position:sticky;的元素,是根据用户的滚动位置定位.粘性元素在相对和固定之间切换,具体取决于滚动位置. 它开始时是相对定位,直到在视口中满足了给定的偏移位置 - 然后它粘住(sticky)到固定的位置(如position:fixed). 小昭的旅行日志😀 //添加一个漂亮的背景色，取自https://webgradients.com/ background-attachment: fixed; background: url(img/background.jpg); //没用到，本来想用图片做一个固定背景传送门：我的CSDN博客我的QQ空间 //俩超链接，一个到博客，一个到qq空间 //一个播放器小组件拉卜楞寺的朝圣拉卜楞寺，位于甘肃省甘南藏族自治州夏河县，藏语全称为：“噶丹夏珠达尔吉扎西益苏奇具琅”，意思为具喜讲修兴吉祥右旋寺。欣赏原图查看地点 //通过缩略图组件扩展 Bootstrap 的栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。添加一点点额外的标签，就可以把任何类型的 HTML 内容，例如标题、段落或按钮，加入缩略图组件内。带俩按钮的缩略图。青海湖畔青海湖是我国青藏高原东北部的一个最大的内陆湖，独特的地理位置加上气候因素。青海湖成了一个著名的旅游景点，青海湖最具有特点的就是气候日照特别的强烈，海天相接的青海湖，更加证明了它的面积是非常广阔的欣赏原图查看地点郎木寺庙郎木寺镇是甘肃甘南藏族自治州碌曲县和四川阿坝藏族羌族自治州若尔盖县共同下辖的一个小镇，白龙江穿镇而过。其中江北的赛赤寺属于甘肃碌曲县，又叫“达仓郎木赛赤寺”，江南是格尔底寺，属于四川若尔盖县，又叫“达仓郎木格尔底寺”，两座寺庙均属藏传佛教格鲁派寺庙。欣赏原图查看地点沙漠明珠：月牙泉月牙泉是敦煌诸多自然景观中的佼佼者，古往今来以“沙漠奇观”著称于世，被誉为“塞外风光之一绝”。月牙泉、莫高窟九层楼和莫高窟艺术景观融为一体，是敦煌城南一脉相连的“三大奇迹”，成为中国乃至世界人民向往的旅游胜地。欣赏原图查看地点日照丹霞张掖丹霞地貌群，俗称“张掖丹霞”，由“七彩丹霞”和“冰沟丹霞”组成。如用文字来表达，仅有两个字震撼。其气势之磅礴、场面之壮观、造型之奇特、色彩之斑斓，大自然的鬼斧神工，令人惊叹。她不仅具有一般丹霞的奇、险，而且更美的在于色。在方圆10多平方公里的范围内，随处可见有红、黄、橙、绿、白、青灰、灰黑、灰白等多种鲜艳的色彩，把无数沟、山丘装点得绚丽多姿。张掖丹霞地貌以她那层理交错的线条、色彩斑斓的色调、灿烂夺目的壮美画图，形成一个彩色的童话世界。欣赏原图查看地点长安不夜城大唐不夜城以盛唐文化为背景，以唐风元素为主线，建有大雁塔北广场、玄奘广场、贞观广场、创领新时代广场四大广场，西安音乐厅、陕西大剧院、西安美术馆、曲江太平洋电影城等四大文化场馆，大唐佛文化、大唐群英谱、贞观之治、武后行从、开元盛世等五大文化雕塑，是西安唐文化展示和体验的首选之地。欣赏原图查看地点 mui.init() /* 鼠标点击爱心特效 */ !function (e, t, a) {function r() {for (var e = 0; e t && t(), o(e)}}function o(e) {var a = t.createElement("div");a.className = "heart", s.push({el: a,x: e.clientX - 5,y: e.clientY - 5,scale: 1,alpha: 1,color: c()}), t.body.appendChild(a)}function i(e) {var a = t.createElement("style");a.type = "text/css";try {a.appendChild(t.createTextNode(e))} catch (t) {a.styleSheet.cssText = e}t.getElementsByTagName("head")[0].appendChild(a)}function c() {return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"}var s = [];e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {setTimeout(e, 1e3 / 60)}, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()}(window, document); 页面预览：

在这里插入图片描述

登录界面登录小昭的旅行日志 //给按钮一个跳转函数，再写一个js的定义，以便跳转到主页面。 css文件 body { margin: 0; padding: 0; background-image: url(../img/20150826_IMG_2927.JPG); /* 背景图片 */ background-repeat: no-repeat; /* 背景图片不重复 */ } #bigBox { margin: 0 auto; /* login框剧中 */ margin-top: 200px; /* login框与顶部的距离 */ padding: 20px 50px; /* login框内部的距离(内部与输入框和按钮的距离) */ background-color: #00000090; /* login框背景颜色和透明度 */ width: 200px; height: 100px; border-radius: 10px; /* 圆角边 */ text-align: center; /* 框内所有内容剧中 */ } #bigBox h1 { color: white; /* LOGIN字体颜色 */ } #bigBox .inputBox { margin-top: 50px; /* 输入框顶部与LOGIN标题的间距 */ } #bigBox .inputBox .inputText { margin-top: 20px; /* 输入框之间的距离 */ } #bigBox .inputBox .inputText span { color: Black; /* icon颜色 */ } #bigBox .inputBox .inputText input { border: 0; /* 删除输入框边框 */ padding: 10px 10px; /* 输入框内的间距 */ border-bottom: 1px solid white; /* 输入框白色下划线 */ background-color: #00000000; /* 输入框透明 */ color: black; /* 输入字体的颜色 */ } #bigBox .loginButton { margin-top: 30px; /* 按钮顶部与输入框的距离 */ width: 150px; height: 25px; color: white; /* 按钮字体颜色 */ border: 0; /* 删除按钮边框 */ border-radius: 20px; /* 按钮圆角边 */ background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%); /* 按钮颜色 */ } 网页预览

在这里插入图片描述

【本文地址】

利用HbuilderX制作简单网页

利用HbuilderX制作简单网页

今日新闻

推荐新闻