一些常用的div 布局名称CSS命名规则整理

CSS+DIV的命名规则:
登录条:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
友情链接:friendLink
页脚:footer
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyRight
1.CSSID的命名
外套:wrap
主导航:mainNav
子导航:subnav
页脚:footer
整个页面:content
页眉:header
页脚:footer
商标:label
标题:title
主导航:mainNav(globalNav)
顶导航:topnav
边导航:sidebar
左导航:leftsideBar
右导航:rightsideBar
旗志:logo
标语:banner
菜单内容1:menu1Content
菜单容量:menuContainer
子菜单:submenu
边导航图标:sidebarIcon
注释:note
面包屑:breadCrumb(即页面所处位置导航提示)
容器:container
内容:content
搜索:search
登陆:login
功能区:shop(如购物车,收银台)
当前的current
2.样式文件命名
主要的:master.css
布局版面:layout.css
专栏:columns.css
文字:font.css
打印样式:print.css
主题:themes.css
版权声明:本文章为田珊珊个人博客原创

网页—个人博客

网页的背景图引用了支付宝知托付加以修改,
缺点:网站的色彩搭配过于杂而乱…
浏览了些个人博客网站,首先对整体的布局进行明确,然后对写出来的区块加以相应的效果
也引用了本地字体和音乐,字体这块对有些浏览器不兼容
查看演示


#picList img{
width:240px;
height:170px;
padding:4px;
cursor:pointer
}
#picList span{
background-color:white;
width:239px;
height:169px;
display:block;
float:left;
margin:5px;
box-shadow: 0px 0px 20px #fff
}
#pan{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.8);
display:none
}
#showImage{
position:absolute;
left:50%;
top:170px;
z-index:6666666;
box-shadow:0px 0px 20px #fff;
margin-left:-329px
}
#showImage span{
position:absolute;
width:660px;
height:460px;
background:#fff;
border-radius: 10px
}
#showImage img{
position:absolute;
margin: 5px;
width:650px;
height:450px;
border-radius: 10px
}
#show{display:none}
#next,#prev{
position:absolute;
width:50px;
height:80px;
box-shadow:0px 0px 20px #fff;
right:110px;
top:330px;
border-radius:10px;
background:rgba(0,0,0,.8);
z-index:20px;
cursor:pointer
}
#next{right: 110px}
#prev{left:100px}
#show p{
font-size:60px;
text-align:center;
line-height:70px;
font-weight:bold;
color:#C5C5C5
}

WordPress登录后台

紧接着上一篇“本地安装WordPress”
我们已经成功的搭建了WordPress的本地运行环境并且也在本地搭建的WordPress环境中成功的安装了WordPress。

1.  WordPress下哪个文件是负责登录和验证

想要访问到WordPress后台,就要在浏览器中访问这个文件即可。

2.  使用浏览器访问wp-login.php这个文件

3.  填写安装WordPress时设置的管理员信息

4.  登录成功之后会跳转到管理员的后台

5.  登录后台之后如何查看网站的前台效果

点击“查看站点”的时候,按着键盘的CTRL键,这样会打开新的网页标签来显示站点。
上面是张动图

本地安装WordPress

上次已经搭建好WordPress本地运行环境,这次来WordPress本地的安装。
WordPress在这里我就简称为 wp 了,好些人也都简单说为 wp 。

1.  下载WordPress

首先我们要去下载一个wp程序
WordPress官网:https://cn.wordpress.org/

说明:
我下载的版本为 WordPress 4.9.4

2.  解压WordPress

用压缩工具解压当前文件夹。

3.  将解压后的文件夹,放到网站根目录下

网站根目录就是之前安装的WordPress本地运行环境

4.  访问WordPress中的 index.php 文件

在浏览器访问: 127.0.0.1  即可
或者访问: localhost
127.0.0.1也相当于localhost。

5.  安装填写相关说明

6.  创建一个数据库

 
之前在“搭建WordPress本地运行环境”中创建过数据库了,名为 cyt

7.  填写对应的信息


接着

8.  填写站点相关信息

9.  安装WordPress成功

到了这里用WordPress本地安装就大功告成了,紧接着是如何访问本地建成的网站

搭建WordPress本地运行环境

WordPress本地运行环境的搭建,了解和访问本地搭建环境下存储的网页文件和网站资源,以及安装phpStudy和和使用,新建数据库

1、WordPress运行所需要的环境

PHP 5.2.4 或更新版本(不支持第三方推出的“PHP 6.0”)
MySQL 5.0 或更新版本
Apache mod_rewrite 模块(可选,用于支持“固定链接”和“站点网络”功能)

2、如何搭建WordPress本地运行环境

WordPress运行环境:本地运行环境、实实在在的运行环境(真实环境)。
本地运行环境
也就是在自己的电脑上搭建一个可以正常运行WordPress的环境,从而让自己在自己的电脑上使用WordPress。
本地运行环境搭建的WordPress站点,只有在自己电脑上看的见,其他人无法看到。
所以本地搭建WordPress运行环境目的是便于自己在这方面的学习和测试。
真实环境
是指在真是的服务器中搭建的WordPress站点,互联网上其他人都能看得到的。

3、如何搭建本地运行环境

Apache、MySQL、PHP,有了这三款软件就可以搭建了,在这里使用了一款集成软件phpStudy,phpStudy包含了这几个软件,当然还有其他的集成软件。
a.     下载phpStudy
phpStudy官网:http://www.phpstudy.net
b.     安装phpStudy
我安装的 phpstudy 2017版的
解压文件夹,找到.exe文件点击进行安装即可

安装完成弹出以下phpstudy软件页面

这里说下“系统服务”和“非系统服务”
“系统服务”表示开机后apache和mysql会以系统服务的形式自动生效,非服务模式需要打开phpstudy才可以生效,建议大家搭建的时候选择“系统服务”。

C.   使用PHPSTUDY

1 .  网页文件和网站资源存放的位置

所有的网页文件和网站资源都要放在phpstudy/phptutorial/www 文件目录下
这是2017版的存放目录,其他版本大都为phpstudy/www 文件目录下,找到www文件目录即可

 
网页文件:.html文件、.php文件都可以理解为网页文件,
网站资源:视频、图片、音频等。
2.   如何访问存放在www目录下的网页文件和网站资源
我在www目录下面存放两张格式为 .jpg 的图片和一个网页(名为:index.html)

例如1.
在输入网址中输入 127.0.0.1/1.jpg 就可以访问刚刚存放的图片
在输入网址中输入 127.0.0.1/index.html 就可以访问刚刚存放的网页文件


例子2
同样在输入网址时输入localhost/2.jpg 也可以访问到该图片,

在这里的 127.0.0.1和localhost 代替了www.index.html和www.1.jpg
localhost(你可以理解为是一个域名),和 WWW目录是一一对应的关系。
127.0.0.1 和 WWW目录也是一一对应关系。
3.  默认首页
例子:
在test目录下,有两个网页文件。

我们试着访问下127.0.0.1/test,看结果如何

看到的却是文件名为index.html的内容
概念:
当访问某个目录时,并且没有指定要访问该目录下哪个文件的时候,默认情况下会将该目录下的index.html、index.php、index.htm的内容显示出来,而index.html、index.php、index.htm就称为默认首页。
默认首页的作用,就是简化访问。
特别说明:
可以人为去修改默认的首页的文件名称。比如说明,将默认首页改为demo.html
也就是访问127.0.0.1/test/demo.html

4.创建数据库

数据库:
专门用于存储数据的仓库。
数据对网站经营者来说,至关重要!
 
如何创建:
步骤1

会有几个选项,选择phpMyAdmin点击
步骤2

步骤三:

 
步骤四:

 
步骤五:

就会看到刚刚创建的数据库名称
5. phpstudy其他操作
运行模式:

如果选择系统服务,那么你的电脑启动之后,Apache和MySQL这两个软件就自动启动并工作。
如果选择非系统服务,那么你只有打开phpstudy并手动去启动Apache和MySQL。
大家在本地学习的时候建议选用 “系统服务
网站根目录:

在“其他选项菜单”下面有一个“网站根目录”的菜单,点击之后就可以快速进入到phpstudy/phptutorial/WWW
或者进入到phpstudy/www目录下

 
搭建WordPress本地运行环境写到这里就告一段落了,后面会有WordPress本地安装
如有错误不解之处请联系博主哦
发邮件

网页—典型的HTML5单页

演示网址

<section>
	    	<p>Fresh News&nbsp;:</p>
	    	<article>
	    		<aside>4</aside>
	    		<ul>
	    			<li><a href="#">Nam libero tempore</a><br>
	    			Cum soluta nobis est eligendi
	    			optio cumque.</li>
	    		</ul>
	    	</article>
	    	<article>
	    		<aside>2</aside>
	    		<ul>
	    			<li><a href="#">Ut enim ad minima veniam</a><br>
	    			Quis autem vel eum iure reprehenderit qui.</li>
	    		</ul>
	    	</article>
	    	<article>
	    		<aside>5</aside>
	    		<ul>
	    			<li><a href="#">Sed perspiciatis unde</a><br>
	    			Nemo enim ipsam voluptatem quia volupatas aspernatur.</li>
	    		</ul>
	    	</article>
	    </section>

 

豫ICP备17012861号