마이페이지 css - maipeiji css

[html/css] form, input - 마이페이지 만들기 중... 김햄씨 ・ 2017. 10. 11. 17:35 일단 포토샵으로 줘 패고... 가장 기본적인 첫번째 화면 기준, 1. html 파일  <div class="mypage"> <img src="images/mypage/mypage_icon_1.png" /> <h2>본 페이지는 로그인을 해야 열람이 가능합니다.<br /></h2> <form action="" method=""> <ul> <li> <input type="text" id="account" class="pww" placeholder="아이디를 입력하세요"> </li> <li> <input type="password" id="pw" class="pww" placeholder="비밀번호를 입력하세요"> </li> </ul> <ul> <li class="pwwco"> <button><a>로그인</a></button> </li> <li class="mypagecs"> <p>* 아이디를 분실하셨나요?</p><button class="mycs"><a>아이디 찾기</a></button> </li> <li class="mypagecs userlogins"> <p>* 비밀번호를 분실하셨나요?</p><button class="mycs"><a>비밀번호 찾기</a></button> </li> </ul> </form> </div> div.mypage { width:65%; margin:0 auto; padding-bottom: 50px;} div.mypage img { padding-top: 100px; } div.mypage h2 { font-size:20px; font-weight: 500; line-height: 140%; text-align: center; margin-top: 30px; color: #000; } div.mypage p { font-size: 11px; text-align: left; margin-left: -15px; margin-top: 5px; vertical-align: middle; float: left;} div.mypage form { margin: 0 auto; width: 50%; padding:30px 10px; vertical-align: middle; } div.mypage form ul { list-style: none; margin: 0 auto; } div.mypage form ul li { border: 1px solid #ededed; background: none; padding:15px 30px; line-height: 150%; margin-top:-10px; } div.mypage form ul li input.pww::-webkit-input-placeholder { text-align: middle; color: gray; font-size: 14px; } div.mypage form ul li.pwwco { background: #2b6296; padding:0px 30px; text-align: center; } div.mypage form ul li.pwwcoo { background: #2b6296; padding:0px 20px; text-align: center; } div.mypage form ul li.pwwcoo.one { background: gray; padding:0px 20px; text-align: center; margin-top:-10px; } div.mypage form ul li button { background: none; text-align: center;} div.mypage form ul li button a { color: white; font-size: 17px; } div.mypage form ul li.mypagecs { background: #ededed; padding:0px 30px; vertical-align: middle;} div.mypage form ul li.mypagecs.userlogins { background: #ededed; vertical-align: middle; margin-top:-10px;} div.mypage form ul li button.mycs { background: #414141; width: 85px; height: 25px; float: right; display: inline-block; padding-top:5px; border-radius: 0; margin-right:-25px; margin-top:4px;} div.mypage form ul li button.mycs a { font-size:11px; vertical-align: top; color: #fff; } 중간에 짜집기 한 게 있어서.... 수정이 안되넹... 다음에 해야 할 게, - 필요 없는 코드 정리해야 하고 - 중복 된 클래스 묶어서 사용하고 - webkit-input-placeholder / 브라우저별 정리해야.... hㅏ.... 개발자 언제 뽑히징 ㅠㅠㅠㅠㅠ 엉엉

Similar ideas popular now

Dashboard Design

Web Design

UI Design

Design

Dashboard Ui

Dashboard Design

App Ui Design

Responsive Design

Interface Design

App Template

Templates

Document Management System

Card Ui

Arion ¨C Admin Dashboard & UI Kit Sketch Template #Dashboard, #amp, #Arion, #Admin

Dashboard Interface

Web Dashboard

Ui Web

Ux Web Design

Web App

Graphic Design

Ui Design Inspiration

#1 Protect advertisers from paying for fraudulent clicks dash ratings statistics profile dash board dasboard dashboad ad blocker advertisement blocker fraudblock fraudblocker

Data Dashboard

App Design

Report Design

2020 Design

Design Trends

Logo Design

Webpage Design

Big data Webpage by YU SongLi

Ui Ux Design

Software Ui Design

Ui Design Mobile

Elearning Design

Web Design Agency

Web Design Services

Web Layout Design

Dashboard UI | eLearning Concept

Analytics Design

Web App Design

Software Design

Website Design

Design Design

Grafik Design

Dribbble full

User Interface Design

Cms Design

Web Design Studio

Web Ui Design

Design Websites

Payroll and Office Management Dashboard #后台# #展示# #数据#

Design Ui Ux

Form Design

User Interface

Retirement Financial Planning

Campaign Planning

Note Reminder

Ui Patterns

Eugen.store

마이페이지

Excel Design

Design Food

Design Social

Planner Dashboard

Anypay Dashboard deposit profile transaction illustration graphicdesign logo branding capital ux ui user money pay dashboad

Design Responsive

Data Design

Web And App Design

Design Inspiration

마이페이지

Website Web

Keyhub: Dashboard saas enterprise status pie monitoring report dashboard platform design system app web page web app website web management certificate lifecycle scan tls ssl certificates

Web Mobile

Budget App

Flooks by Svetlana Tokareva for Geex Arts on Dribbble

Wireframe Design

Mobile Ui Patterns

Digital Network

Social Media Dashboard

Custom Dashboard

Best Web Design

CRM Dashboard Concept by Syed Misba-Ul Hussain | Dribbble

Flat Design

Design Elements

Minning Dashboard - Exploration designed by M Rizky Edriansyah. Connect with them on Dribbble; the global community for designers and creative professionals.

Analytics Dashboard

Dashboard Reports

Digital Dashboard

Dashboard Examples

Data Analytics

Web Design

Dashboard by Zura Avalishvili - Dribbble

Financial Dashboard

Web Graphic Design

Design Website

Fund analytics app - guest listing view We’re available for new projects! Drop us a line at . — Show us love! Press “L”. Want to see more projects? Visit our profile and remember ...

Graphisches Design

Apps

Stats page full More

Flat Web Design

Cloud Mining Dashboard mining finance cloud graphics web cuberto charts dashboard sketch icons ux ui

Design Agency

Music Poster

Poster Design

Music Player by Aurélien Salomon ➔

Dribbble full

GIF

System Administrator

Sketch App

Jobs Apps

Tdi

Management

Behance

TDI - Data Dashboard Design on Behance

Jobs

Brisbane

Link in bio #webdesign #webdevelopment #angular #angular2 #nodejs #angularjs #code #coder #coding #dev #developer #development #firebase #html #html5 #css #css3 #javascript #js #macbook #macbookpro #nodejs #java #php #software #tech #technology #ruby #webdesign #webdeveloper

Design Thinking

Ui Website

Intranet Design

Prototyping Tools

Hello, Hope your week is going great. Dashboard for restaurants this time from me. I hope that you will like it! Make sure to check the attachment for detailed view ___ Follow us on Twitter &a...

Dashboard App

Coding Software

Mobile Ui Design

Layout

Leaderboard

2016 Design

Graphic Design Magazine

Magazine Design

하루 일정과 메모를 함께