HTML+CSS实现登录转跳(无后台)

HTML+CSS实现登录转跳(无后台)

块元素/内敛元素
横着放置div元素
选择符使用技巧:
伪类
鼠标悬停修改样式
文本竖直居中

基本知识点

块元素/内敛元素
两者区别:

1.块元素默认占全屏,内联元素只占文本内容大小
2.块元素可设置宽高,内联元素宽高无效
3.块元素强制下一个元素换行,内联元素显示在同一行直到放满自动换行
4.可以相互转换
    display: inline;---把块变成内敛元素
    display: block;----把内敛变成块
    display: inline-block;保持内联元素特性的情况下可以设置宽高
    (都是CSS属性)

横着放置div元素?

float: left; //左对齐 
float: right;//右对齐
.nav li a:hover{}  ---伪类(鼠标悬停修改样式)
line-height: 30px;文本竖直居中行间距属性值必须等于容器的高度值
box-shadow: 5px 5px 5px black;//元素阴影
text-shadow: 5px 5px 5px black;//文本阴影
text-decoration: none;//去下划线

选择符使用技巧:

id选择符:style中使用在大模块
         JS中,单一事件使用id
类选择器:style中推荐使用;可重用性

横着放置div元素HTML+CSS实现登录转跳(无后台)_第1张图片
HTML+CSS实现登录转跳(无后台)_第2张图片



    
        
        导航
        
    
    
        
    

登录

代码

注意 这里的登录是


所以在点击登录时要点击“登录”这两个字



    
        
        登录
        
    
     
        

登录

记住密码 请确认是安全是PC

转跳页面代码(模拟微信)

HTML+CSS实现登录转跳(无后台)_第3张图片
HTML+CSS实现登录转跳(无后台)_第4张图片
HTML+CSS实现登录转跳(无后台)_第5张图片



    
        
        微信
        
    
    
        
狗子

你知道吗?我喜欢你呀

你可能感兴趣的:(HTML+CSS实现登录转跳(无后台))