前端----GitHub登录页和首页制作

最新推荐文章于 2024-03-16 21:30:20 发布

VIP文章 NO0b

最新推荐文章于 2024-03-16 21:30:20 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签：前端 GitHub 首页制作简易

本文链接：https://blog.csdn.net/q5706503/article/details/82957700

版权

做了登陆页和登陆后的首页的静态样式效果, 没有加超链接,没点击效果,

先上效果图:

然后绿色的登陆按钮可以跳转首页(没做对账号密码的检查,空着也能跳转):

主要为了练习布局, 练习CSS的一些样式, 图片图标全是网站截图下来的

页面相对简洁, 文字居多, 以黑白灰为主加上圆角的灰色边框,感觉挺清新

这个首页上边的渐变效果是一个背景效果:

background-image: linear-gradient(180deg,hsla(0,0%,100%,0) 60%,#fff),linear-gradient(70deg,#dbedff 32%,#ebfff0);

效果挺不错的, 可以效仿

这个placeholder的字体属性可以改, 可以参考我的另一篇博客:

https://blog.csdn.net/q5706503/article/details/82826901

input里的这个小图标是截图,绝对定位到这的

下边是代码:登陆页的HTML+CSS和首页的HTML和CSS共4个

<!DOCTYPE html>
<html>
<head>
	<title>The world’s leading software development platform · GitHub</title>
	<link href="sign.css" rel="stylesheet" type="text/css"/>
	<link rel="shortcut icon" href="cat.png" type="image/x-icon" />
</head>
<body>
	<form id="form" action="file:///D:/%E4%B8%B4%E6%97%B6%E6%96%87%E4%BB%B6/%E5%89%8D%E7%AB%AF/github/github.html"></form>
	<div id="div_topMenu">
	<div id="div_top">
		<img src="ico.png" id="img_icon"></img>
		<ul id="ul_top">
			<li class="li_top">Features</li>
			<li class="li_top">Business</li>
			<li class="li_top">Explore</li>
			<li class="li_top">Marketplace</li>
			<li class="li_top">Pricing</li>
		</ul>
		<input id="input_search" type="text" placeholder="Search GitHub"></input>
		<img id="img_search" src="https://assets-cdn.github.com/images/search-shortcut-hint.svg"></img>
		<span class="span_white">Sign in</span>
		<span class="span_gray">or</span>
		<span class="span_white">Sign up</span>
	</div>
	</div>
	<div id="div_mainContainer">
	<div id="div_main">
		<h1>Built for<br>developers</h1>
		<p id="p_main">GitHub is a development platform inspired by the way you work. From<a class="a_w

最低0.47元/天解锁文章

NO0b

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端----GitHub登录页和首页制作

做了登陆页和登陆后的首页的静态样式效果, 没有加超链接,没点击效果,先上效果图:然后绿色的登陆按钮可以跳转首页(没做对账号密码的检查,空着也能跳转):主要为了练习布局, 练习CSS的一些样式, 图片图标全是网站截图下来的页面相对简洁, 文字居多, 以黑白灰为主加上圆角的灰色边框,感觉挺清新这个首页上边的渐变效果是一个背景效果:background-image:...
复制链接

扫一扫