运行一个网站要多少钱,网站提供什么服务,wordpress安装后查看站点失败,server2008部署网站写在前面
1、基于2022级计算机大类实验指导书
2、代码仅提供参考#xff0c;前端变化比较大#xff0c;按照要求#xff0c;只能做到像#xff0c;不能做到一模一样
3、图片和文字仅为示例#xff0c;需要自行替换
4、如果代码不满足你的要求#xff0c;请寻求其他的…写在前面
1、基于2022级计算机大类实验指导书
2、代码仅提供参考前端变化比较大按照要求只能做到像不能做到一模一样
3、图片和文字仅为示例需要自行替换
4、如果代码不满足你的要求请寻求其他的途径
运行环境
window11家庭版
WebStorm 2023.2.2
实验要求、源代码和运行结果
1、使用HBuilder编写代码实现图4-1所示布局效果要求
① 采用绝对定位、相对定位、浮动定位等方式完成页面布局。 图4-1实验内容效果示意图
1新建html文档、CSS文件。
2采用定位属性完成图4-1式布局效果。
3每个图层颜色logo、nav等由学生自拟。
4整个宽度为1000px高度header:124px;logo:80px;nav:40px第3个区域4个图层的宽度为250px、高度为400px高度footer:40px。
Experiment4_1.html
!DOCTYPE html
html langen
headmeta charsetUTF-8link relstylesheet hrefExperiment4_1.csstitle/title
/head
body
div classwrapperdiv classheaderHeader/divdiv classlogoLogo/divdiv classnavNav/divdiv classcontentdiv classbox1Box 1/divdiv classbox2Box 2/divdiv classbox3Box 3/divdiv classbox4Box 4/div/divdiv classfooterFooter/div
/div
/body
/html
Experiment4_4.css
body {margin: 0;font-family: Arial, sans-serif;
}.wrapper {width: 1000px;margin: 0 auto;position: relative;
}.header, .logo, .nav, .content, .footer {border: 1px solid #ccc;
}.header {height: 124px;background-color: #f0f0f0;position: relative;
}.logo {height: 80px;background-color: #3498db;position: absolute;top: 0;left: 0;right: 0;
}.nav {height: 40px;background-color: #2ecc71;position: absolute;top: 80px;left: 0;right: 0;
}.content {position: relative;
}.box1, .box2, .box3, .box4 {width: 25%;height: 400px;float: left;
}.box1 {background-color: #e74c3c;
}.box2 {background-color: #f39c12;
}.box3 {background-color: #2c3e50;
}.box4 {background-color: #95a5a6;
}.footer {height: 40px;background-color: #34495e;clear: both;
}2、CSS综合应用编写代码实现图4-2所示的页面效果要求
① 结构和样式相分离html和CSS相分离。
② 页面从上到下四个区域在上面区域为图片展示区整体居中显示素材由实验老师提供。 图4-2 CSS综合实例页面效果示意图
1新建html文档、CSS文件。采用link标签将CSS文件导入html文档。
2页面body从上到下依次为header、nav、main、footer以下为已知属性 body { background: #EDF6F7; font-family: 微软雅黑, Times New Roman, serif; color: #666; font-size: 14px; line-height: 18px;}
.flex {//header、nav、main、footer都会引用 width: 100%; width: 960px; margin: 0 auto;
}
3header部分,在h1标签中插入图片。
4nav部分background: #384E80;导航栏使用ul实现height: 50pxdisplay:flexfont-size: 16px;
5main部分采取左中右布局artice、aside、aside。 1、main: background: #FFF; padding-bottom:10px; 2、artice:h2标签插入“地球日”外下边距和内下边距为10px,
点状横线border-bottom: 2px dotted #ddd; section标签内插入图片和文字图片高度height: 188px
p标签插入文字text-indent: 2em;
3、aside:padding:10px;h3插入标题color:#5F822F;font-size:18px;
使用无序列表和a实现各列表项li宽度为180px高度为18px。
6footer部分background: #384E80; height:40px; padding-top:20px;
p©2018我们的地球日/p。
Experiment4_2.html
!DOCTYPE html
html langen
headmeta charsetUTF-8link relstylesheet hrefExperiment4_2.csstitle/title
/head
body
headerh1 stylewidth: 100%img src../4.jpg stylewidth: 100%;height:136px/h1
/header
navullia href#首页/a/lilia href#目录/a/lilia href#关于我们/a/lilia href#联系我们/a/li/ul
/nav
maindiv classflexarticleh2地球日/h2divimg src../1.jpg stylewidth:100%;height:250px/div/articlearticledivsectionp styletext-indent: 2em;地球日介绍/p/section/div/articleasidedivh3目录/h3ullia href#活动影响/a/lilia href#创始人/a/lilia href#历年主题/a/lilia href#历年国内活动/a/li/ul/div/asideasidedivh3做什么/h3ullia href#倡导低碳生活/a/lilia href#从身边的小事做起/a/lilia href#从节约资源做起/a/lilia href#科学发展/a/lilia href#公众参与/a/lilia href#防治有毒化学品污染/a/li/ul/div/aside/div
/main
footerp©2018我们的地球日/p
/footer
/body
/html
Experiment4_2.css
body {background: #EDF6F7;font-family: 微软雅黑, Times New Roman, serif;color: #666;font-size: 14px;line-height: 18px;
}.flex {width: 100%;margin: 0 auto;display: flex;
}nav {background: #384E80;flex-basis: 20%;
}nav ul {height: 50px;display: flex;align-items: center;justify-content: flex-start;font-size: 16px;list-style: none;padding: 0;
}nav ul li a {margin-right: 20px;color: white;
}article {flex-basis: 30%;
}aside {flex-basis: 20%;
}aside h3 {color: #5F822F;font-size: 18px;
}aside ul li {width: 180px;height: 18px;
}main {background: #FFF;padding-bottom: 10px;display: flex;
}footer {background: #384E80;height: 40px;flex-basis: 100%;display: flex;align-items: center;justify-content: center;
}footer p {color: white;margin: 0;
}a {text-decoration: none;
}.article, .aside {box-sizing: border-box;
}article, aside {margin: 0;padding: 0;
}
